C3新增属性扩展：
穿透效果：
pointer-events:none;
通过自身访问被盖住的内容
盒子阴影：
给元素添加的阴影：
box-shadow:;
h-shadow 水平阴影的位置，必选
v-shadow 垂直阴影的位置，必选
blur 模糊的距离，可选
spread 阴影的大小，可选
color 阴影的颜色，可选
inset 从外阴影开始时改变阴影内测阴影，可选
box-shadow: 10px 10px 5px 10px #333 inset;
设置多阴影，中间用逗号隔开
多阴影之间有层级关系，先写的层级高
图片边框属性:
border-image-source:url()用于边框的图片的路径
border-image-slice 图片边框向内偏移
border-image-repeat 图片边框书否平铺
repeat 平铺
round 铺满
strecth 拉伸
border-image-outset 边框图片区域超出边框的量,不写进复合属性内，值是一个倍数
复合属性：
border-image：source slice repeat;
渐变
1.线性渐变：从一个点到另一个点的渐变
语法：
background-image:repeating-linear-gradient(direction,color stop1,color stop2,...);
linear-gradient() 线性渐变
direction：设置渐变的方向
to bottom 默认值，自上而下
to top
to left
to right
to right top
to right bottom
ti left top
to left bottom
角度(deg)
color 渐变的颜色
stop 渐变的范围(默认值平均分配)
单位可以是px/%；
repeating 重复显示渐变效果
2.多渐变的设置：
渐变和渐变之间用逗号隔开
先写的渐变层级最高
3.径向渐变：从一个点像四周扩散
语法：
background-image:radial-gradient(shape size at position,color stop,...,color stop);
radial-gradient() 径向渐变
shape 设置渐变的形状
ellipse 椭圆，默认值
circle 圆形
size 设置渐变的大小
closest-side
farthest-side
closest-corner
farther-corner 默认值，最远角
position 设置渐变起始点的位置
默认值：中心点
属性值：
数值：px、%
法定属性值：left right center top bottom
设置两个值：第一个值表示水平位置，第二个值表示垂直方向的位置
设置一个值：
数值时，表示宽，高则显示为center
法定属性值，未设置的为center
color 渐变的颜色
stop 渐变颜色的显示范围
repeating- 重复显示渐变效果
background-image:repeating-radial-gradient(circle farther-corner at 20px 30px,red,yellow,green);
过渡属性:
过渡属性：
说明：在一定的时间区间内，实现元素从一个值到另一个值之间的变化
过渡属性，必须在触发某个事件时，才会产生过渡效果
语法:
复合属性：
transition:property duration delay timing-function;中间用空格隔开
1.参与过渡的属性：
transition-property:;
属性值：参与过渡的属性名称，多个属性用逗号隔开，默认值all
2.过渡的持续时间:必须要有的
transition-duration:;
属性值：数值；单位：s/ms
3.过度延迟的时间：
trasition-delay:;
属性值：数值；单位：s/ms
小数点的0可以省略
支持负值：提前执行
4.过渡运动类型
transition-timing-function:;
贝塞尔曲线
linear 匀速
ease 逐渐慢下来，默认值
ease-in 加速
ease-out 减速
ease-in-out先加速后减速
steps(n) 逐帧
2D：
2D：
表示平面空间
x轴：向左为负，向右为正
y轴：向上为负，向下为正
变形属性：
transform:;
属性值：
1.位移：元素是相对于自身所在位置发生位移的，类似于相对定位
translate(x) 水平方向的位移
translate(x,y) 水平方向的位移，垂直方向的位移
translateX(x)单独设置
translateY(y)
属性值的单位：px,%
2.缩放：
scale()
scale(xy) 水平和垂直都会被缩放
scale(x,y)水平方向和垂直方向
scaleX(x)单独设置
scaleY(y)
属性值：是一个倍数，不加单位，支持负值
0—1 缩小
1 不缩小
>1 放大
<0 缩小
3.旋转：
rotate()
rotate(z) 沿中心点，左右旋转
rotateX(x) 沿x轴旋转
rotateY(y) 沿y轴旋转
属性值单位：角度deg，支持负值
4.倾斜：
skew()
skew(x)
skew(x,y)
skewX(x)
skewY(y)
属性值单位：角度deg，支持负值右
2.变形复合属性：
可以同时设置多种效果，中间用空格隔开，不能分开写
1.先位移和先旋转的区别：
位移之后再旋转
旋转之后再位移：旋转的过程中，xy轴发生了变化，始终和元素保持
3.变形属性的特点：
1.添加了变形属性的元素，发生了层级变化；
2.层级关系根据html结构的书写顺序显示，后写的层级最高
3.变形之后原来的位置是保留的，不影响页面布局，不脱离文档流
4.变形元素默认时都是相对元素的中心点发生变形的
5.改变层级关系，加定位属性，应用z-index；
4.设置被旋转元素的背面是否可见
backface-visibility:;
hidden 隐藏 不可见
visible 可见 默认值
5.变形原点属性：
transform-origin:;
属性值：默认值为中心点
数值加单位：px/%;
法定属性值：left，right，center，top，bottom
一个值：
数值时：表示水平方向的原点位置，另一个值默认为center
法定属性值：另一个值默认为center
两个值：
数值时：第一个值表示水平，第二个值表示垂直
渐变，多背景，阴影先写的层级高
定位，变形属性后写的层级高
