1.设置背景图片大小
background-size 宽度和高度
1.1 采用数字+px
1.2 百分比
1.3 contain 包含将背景图片等比例缩放，直到不会超出盒子的最大
1.4 cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白
2.文字阴影
text-shadow 给文字添加阴影效果
h-shadow 必须 水平偏移量 可以是负值
v-shadow 必须 垂直偏移量 可以是负值
blur 可选 模糊度
spre 可选 阴影扩大
color 可选 阴影颜色
inset 可选 将阴影改为内部阴影
3.transform 过渡效果
| 属性 | 描述 |
|---|---|
| transition | 用于在单个声明中设置所有四个单独过渡属性的简写属性。 |
| transition-delay | 指定何时开始过渡。 |
| transition-duration | 指定过渡动画完成所需的秒数或毫秒数。 |
| transition-property | 指定应将过渡效果应用到的CSS属性的名称。 |
| transition-timing-function | 指定如何计算受过渡影响的CSS属性的中间值。 |
4.2D功能
下表简要概述了所有2D转换功能。
| 功能 | 描述 |
|---|---|
| translate(tx,ty) | 沿X和Y轴将元素移动给定的数量。 |
| translateX(tx) | 沿X轴将元素移动指定的量。 |
| translateY(ty) | 沿Y轴将元素移动指定的量。 |
| rotate(a) | 根据transform-origin属性定义，以指定的角度围绕元素的原点旋转元素。 |
| scale(sx,sy) | 按给定数量向上或向下缩放元素的宽度和高度。该功能scale(1,1)无效。 |
| scaleX(sx) | 按给定数量向上或向下缩放元素的宽度。 |
| scaleY(sy) | 按给定数量向上或向下缩放元素的高度。 |
| skew(ax,ay) | 使元素沿X和Y轴倾斜给定角度。 |
| skewX(ax) | 使元素沿X轴倾斜给定角度。 |
| skewY(ay) | 使元素沿Y轴倾斜给定角度。 |
| matrix(n,n,n,n,n,n) | 以包含六个值的转换矩阵的形式指定2D转换。 |
5.## 3D转换功能
下表简要概述了所有3D转换功能。
| 功能 | 描述 |
|---|---|
| translate3d(tx,ty,tz) | 沿X，Y和Z轴将元素移动给定的数量。 |
| translateX(tx) | 沿X轴将元素移动给定的数量。 |
| translateY(ty) | 沿Y轴将元素移动给定的数量。 |
| translateZ(tz) | 沿Z轴将元素移动给定的数量。 |
| rotate3d(x,y,z, a) | 围绕[x，y，z]方向向量，按最后一个参数中指定的角度旋转3D空间中的元素。 |
| rotateX(a) | 围绕X轴将元素旋转给定角度。 |
| rotateY(a) | 将元素绕Y轴旋转给定角度。 |
| rotateZ(a) | 围绕Z轴将元素旋转给定角度。 |
| scale3d(sx,sy,sz) | 沿X，Y和Z轴按给定的数量缩放元素。该功能scale3d(1,1,1)无效。 |
| scaleX(sx) | 沿X轴缩放元素。 |
| scaleY(sy) | 沿Y轴缩放元素。 |
| scaleZ(sz) | 沿Z轴缩放元素。 |
| matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 以16个值的4×4转换矩阵的形式指定3D转换。 |
| perspective(length) | 定义3D变换元素的透视图。通常，随着此函数值的增加，元素将出现在离查看者更远的地方。 |
