CSS3第一天

一、iconfont

1. 概念：iconfont是字体图标

2. 常用字体图标库：阿里iconfont字体图标库

3. 阿里图标库五种使用方式

   • Unicode引用

      1. link引用iconfont.css文件; 
      2. 把Unicode编码插入i标签内; 
      3. 声明字体图标库font-family:iconfont
     

   • 类名引用

      1. link引用iconfont.css文件; 
      2. 设置相应字体图标类名在i标签上(class=iconfont 图标类名"")
     

   • 伪元素引用

      1. link引用iconfont.css文件;
      2. 在伪元素content内容中,填充该字体图标的unicode编码，然后把前三个字符和后面的分号去掉，在最前面添加“\”; 
      3. 声明字体图标库font-family: iconfont;
     

   • 在线引用

      1. link在线引入字体图标，要在链接前面添加 http:; 
      2. 给标签设置类名, 注意:这种类型需要网络
     

   • symbol引用

二、平面转换transform属性

01-位移translate

语法：transform: translate(水平移动距离, 垂直移动距离)

取值: x轴正向为右, Y轴正向向下

1. 像素单位数值
2. 百分比(参照物为盒子自身尺寸)

注意

1. translate()如果只给一个值, 表示x轴方向移动距离
2. 单独设置某个方向的移动距离: translateX() 和 translateY()
3. tf属性对于行内元素是无效的
4. 添加例如tf属性的盒子可以提高盒子层级,保留原来的位置--类似相对定位的特点
5. 取值中间由逗号隔开

02-旋转rotate

语法: transform: rotate(角度)---角度单位是deg

取值: 取值正负均可

1. 取值为正, 则顺时针旋转
2. 取值为负, 则逆时针旋转

03-转换原点transform-origin

语法：transform-origin: 圆点水平位置, 圆点垂直位置

默认值：默认圆点是盒子中心点

取值：

• 方位名词(用的最多)
• 像素单位数值（正负均可）
• 百分比(参照盒子自身尺寸计算)

04-缩放scale

语法: transform: scale(x轴缩放倍数, y轴缩放倍数)

取值:

• 一般情况下,只为scale设置一个值, 表示x轴和y轴等比例缩放
• transform: scale(缩放倍数)
• scale值大于1表示放大, scale值小于1表示缩小

05-transform属性复合写法

语法: transform: translate() rotate()

注意点： 当平移与旋转一起使用的时候，要把平移放在旋转的前面，旋转会改变坐标轴方向

三、背景渐变background-image：linear-gradient

线性渐变语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

参数：

方位：默认的方位从上到下
     1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
     2.角度deg：直接写度数即可，不用再加to
参数2：颜色1(颜色单词、transparent、十六进制颜色、rgba)；
参数3：颜色2；.....