c3新特性
1.文本阴影text-shadow
text-shadow:偏移量x 偏移量y 模糊度 颜色；
注意：
水平偏移量： 正值向右，负值向左
垂直偏移量： 正值向下，负值向上
模糊度不能为负数
可设置多个text-shadow，每个用逗号分隔
例子:text-shadow:1px 2px 3px red,2px 3px 4px pink;
2.边框圆角 border-radius
border-radius:10px 10px 10px 10px/5px 5px 5px 5px;
前面四个是横轴半径，后面四个值是纵轴半径，如果后面四个值不写，纵轴半径默认等于横轴半径
3.盒子阴影 box-shadow
水平偏移量 +向右 -向左
垂直偏移量 +向下 -向上
模糊度不能为负数
inset可设置内阴影，box-shadow：inset 1px 1px 1px red;
设置box-shadow不会改变盒子大小，不会影响兄弟元素布局
可设置多重边框阴影，增强立体感
4.边框图片boeder-image
路径：border-image-source:url();
图片拆分：border-image-slice:30 30 30 30;//上 右 下 左
border-image-slice:30 fill;
以上，会将中间裁掉的部分在盒子内平铺
图片拉伸：
border-image-repeat:stretch //默认的拉伸效果
repeat //平铺，不完整显示
round //完整的平铺
边框图片宽度：
border-image-width:并不能改变盒子大小，只能改变边框图片大小
最终的连写：
border-image:url() slice/width repeat;
5.背景大小 background-size
作用：设置背景图片大小
设置方式：background-size:200px 200px; //具体尺寸
100% 100%; //比例
100% auto; //自适应
auto 100%; //自适应
cover; //铺满父容器
contain //在父容器中完整显示
6.设置背景原点background-origin
作用：设置背景图片原点位置，这个原点，指的是图片左上角
也就是重新定义了background-position的显示位置
应用background-origin:content-box； //以内容左上角为原点
padding-box; //默认选项，以内边距为原点
border-box; //以外边距为原点
7.background-clip背景区域裁切（也就是让图片在什么区域内显示）
作用：裁切背景，移动端应用的多
应用：background-clip:padding-box; //padding以外的部分会被裁掉
border-box; //border以外的部分会被裁掉
content-box; //content以外的部分会被裁掉
8.多背景background: url() ,url(),url();
注意：不同的背景，用逗号分隔
设置多背景的时候，不能再设置背景颜色（不能连写），如有需要，聚单独写background来设置颜色
9.渐变
线性渐变：background-image:linear-gradient(渐变方向开始和结束状态，渐变范围（距离）)
渐变方向：可以是具体方向：to top
to bottom
to left
to right
也可以是角度：90deg
例子：
background-image:linear-gradient(
to right, //从左向右
red 20%, //开始颜色是红色，从盒子宽度20%的位置开始变
green //结尾颜色是绿色
);
注意：如果没有设置background-size，百分比是以盒子宽度为参照设置的，否则是以background-size为参照设置的；
10.径向渐变background-image:radial-gradient(圆点，开始、结束)
注意：径向渐变的百分比是以设置的半径为参照的
圆心位置设置：关键词：center/left.......
具体值：第一个值代表水平方向，第二个垂直，第二个如果不设置，默认Center
例子：
background-image:radial-gradient(
100px 50px at center, //第一个是水平半径，第二个是垂直半径，第三个是圆心，意思是在盒子中心
red 20%, //在圆的半径20%的位置开始变
green
);
11.过渡trasition
11.1补间动画
过渡属性：transition-property:all //默认全部
width
htight
.....多个属性用逗号分隔
过渡执行总时间：transition-duration: ;
动画执行速度（类型）transition-timing-function:linear //匀速
ease
ease-in
ease-out
ease-in -out
动画延时时间：transition-delay: ;
注意：transition一般放在开始状态里。
11.2帧动画
12.2D转换
transiform:translate(x,y) //第一个值是水平，第二个垂直
旋转：transform:rotate(deg); //正值是顺时针，负值是逆时针
缩放：trasorm:scale(倍数）； //整数（>1）放大，小数（<1）缩小
倾斜:transform:skew(deg,deg); //水平，垂直
旋转原点：transform-origin：center; //默认
left;
right;
bottom;
top;
13.3D转换
左手法则：左手握住旋转轴，拇指指向旋转轴方向，四指指向的方向就是正方形。
13.1 3D转换分类
transform: translateX() translateY() translatrZ(); //位移
例子：
transform:translateX(100px) translateY(100px) translateZ(100px);
transform:rotateX() rotateY() rotateZ(); //旋转
transform:scaleX() scaleY() scaleZ(); //缩放
14.透视 perspective
作用：辅助了解3D效果，不是必须的步骤
取值：600-1200px是人眼最舒服的状态
设置方式：将该属性作为父元素的单独属性设置
将perspective作为transform的属性设置
transform:perspective(100px) translateX(100px);
15.动画
语法：
@keyframes scale{
from{}
to{}
}
通过animation:;调用动画，哪个元素调用，就写在哪里。
调用动画名称：animation-name:;
设置动画完成时间：animation-duration:;
设置动画执行次数：animation-interation-count:infinite; //一直执行
具体时间，如2s
默认执行1次
设置延时执行时间：animation-delay:;
动画执行类型（速度）：animation-timing-function:linear;
ease;
ease-in;
ease-out;
ease-in-out;
动画逆波（是否有反向运动）：animation-direction:normal;
reverse; //反向
alternate; //正常执行
alternate-reverse;
设置动画时间之外的状态：animation-play-state:running； //默认
paused; //暂停
转为3D盒子：transform-style:preserve-3d;
steps(); //步长