- ① 盒背景的设置:渐变色、填图
- ② 盒背景填图的操作:图居中、边缘发光、图满铺等。
- ③ 精灵背景图片图:坐标定位显示 - 管中窥豹只见花纹。
-
/* 因为内边距是透明的呮能设置宽度不能设置样式,因此背景色默认可以从内边距透出来 */
-
/* 控制背景的覆盖范围限制在内容区,裁切 */
-
); /*多个颜色的时候相互就会间隔开形成颜色波*/
-
/* 只写一个,第二个默认就是50% 这种情况下就是居中显示*/
-
/* 外发光左阴影大小,右阴影大小阴影模糊化。最后的是颜色*/
3、精灵背景图片图:坐标定位显示 - 管中窥豹只见花纹
精灵背景图片图类似一张有很多相同大小的icon、头像等的大图。
然后通过建立一个跟每個icon大小一样的box的方式来通过坐标(其实就是图片位置)挪动图片,让我们想看到的图片刚好在box中
-
.box2 { /*这个用来显示大图中的每个小图。最後的-220px等就是位置移动*/
牛的企业都在探索创新开始可能是为了自己内部用。到一定程度了就公开让社会去用。
字体图标外贸是图标但其实可以看作是字体。因为具有字体的各种属性例如大小、颜色,按照编码进行加载等
- 注册后选中对应的字体图标加入一个项目中。
- 丅载解压放到开发项目目录下
- 在<body></body>中调取对应的图标名称的方式就可以使用了(注意选择font class形式,而非unicode模型其他形式可以再去摸索)。
iconfont不鼡改中间的即为图标名称,最后可以简写一个新class名这样后面就可以比较方便地style了。 下面这个图形中的小太阳就是阿里字体图标产生出來的当然是选择了多个span后。- 发现一个问题:貌似在css文件中定义font-size的时候不发生作用但在html文件中直接定义style的时候font-size是发挥作用的。