CSS3进阶

一、字体图标替代精灵图

字体图标看似图片，实则是文字，可以按照更改文字的样式来更改文字图标，简易性大大提升。

具体做法是可以登录阿里巴巴矢量图网站，下载自己所需要的字体图标样式，引入html文件即可。

二、CSS之位移，实现盒子居中等效果

transform:translate(x,y); 有三种表示方法：

1、X表示水平方向的移动，右正左负；Y表示垂直方向的移动，下正上负；用逗号隔开

2、只写一个值，表表示水平方向的移动；

3、百分比写法，以盒子自身为参照对象；

三、CSS之旋转

transform：rotate(xxxdeg);

顺时旋转正角度；逆时旋转负角度；

改变旋转原点：transform-origin：(xx,xx); 属性值常用（left、center、right、top、bottom）

注意：实现一个盒子的水平旋转，最好将平移属性写在上面，旋转属性写在下面，因为旋转时盒子的X轴是不断在变化的

四、CSS之缩放

transform：sacle(x);通常只写一个值，大于1表示放大；小于1表示缩小

五、CSS之背景渐变

background-image:linear-gradient(to 方向 ， 颜色，颜色……颜色)