精灵图:
精灵图:项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图 优点:减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用步骤:
1.创建一个盒子, 设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
背景图大小设置:
background-size:cover|contain|百分比|数字 background-size
-
auto： 背景图像的真实大小。
-
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
-
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
文字阴影:
text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色; text-shadow: -8px 0px 9px red;
盒子阴影:
box-shadow:水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内/外阴影 ; box-shadow: 2px -10px 6px 5px rgba(0, 0, 0, .5) ;
过渡:
过渡 就是让元素慢慢的发生变化,过渡通常搭配hover一起使用 transition属性给需要过渡的元素本身加
语法:transition:过渡属性 过渡时间;
icon图标设置:
需要借助比特虫来生成: 网站地址:www.bitbug.net/
