初学移动Web第一天

一、字体图标 iconfont阿里巴巴矢量图标库

引入方式：

本地引入：挑选图标加入购物车。添加至项目，去到项目中，点击下载代码，解压压缩包，更改文件夹的名字为iconfont。放项目文件夹中，利用font class的方式去引入。

在线引入：挑选图标加入购物车，添加至项目，复制链接，用link引入，先设置公共类名icontfont，在粘贴图标的类名即可<i class="iconfont icon-xxx"></i>

注意：在引入字体图标时时记得加http或者https:

1.平面坐标系

2.平移：transform:translate(水平，垂直)

3.旋转：transform:rotate(30deg)

4.缩放：transform:scale(水平倍数，垂直倍数)

0~1是缩小，大于1是放大

transform:scale(2)，代表水平垂直都放大2倍，不用加单位

5.斜切：transform:skew(水平，垂直)

transform:skewX(30deg)，transform:skewY(30deg)

注意：行内元素设置转换无效。

如果有多个转换要写到同一个transform里，要用空格分隔，transfrom:translate(100px) transfrom:rotate(90deg)

如果同时有旋转和平移属性，最好先写平移，再写旋转

background-image:linear-gradient(方位，颜色，颜色)

方位，to right从左到右

45deg，从左下到右上，参考时钟

1.border-box

2.padding-box

3.content-box

4.text:背景只显示在文字的区域，

-weblit-background-clip:text

应用：可以配合背景渐变实现渐变文字，color:transparent