首页 > Web开发 > 详细

CSS3属性+iconfont字体图标的使用方法

时间:2020-03-19 23:14:02      阅读:82      评论:0      收藏:0      [点我收藏+]


CSS3属性
文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色;
可以多组值共同存在,用逗号隔开
多层文本阴影的设置:text-shadow:第一层,第二层,第三层;

文本换行:
在单词内部换行:
word-wrap:;
normal:默认值,不允许在单词内部换行。
break-word:允许单词内部换行。
word-break:;
break-all 允许在单词内部换行
keep-all 允许在换行点换行,单词内部不换行
盒子阴影: box-shadow:水平阴影 垂直阴影 模糊度 阴影大小 颜色 内外阴影(可选写);
默认影子在外面(忽略不写)
设置影子在内部(inset)
多层盒子阴影的设置:box-shadow:第一层,第二层,第三层;

iconfont字体图标
方式一: 在本地引入
1: 去官网下载
2: 在页面引入外部css文件
3: 挑选对应的类名

方式二:在线引入
1: 在页面引入链接地址
2: 挑选对应的类名
3: 去官网下载
4: 修改引入css文件的路径

彩色图标:
1: 引入外部iconfont.js文件
2: 在style中添加
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
3: <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-名字"></use>
</svg>

CSS3属性+iconfont字体图标的使用方法

原文:https://www.cnblogs.com/52580587zl/p/12528047.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!