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


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 aria-hidden="true">
<use xlink:href="#icon-名字"></use>
</svg>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwyydg.html