圆角
border-radius: 5px 5px 5% 5%;
阴影
box-shadow:盒子阴影
x y 模糊度 扩展半径 颜色
阴影可以加多个，用逗号隔开
内阴影: inset x y 模糊度 扩展半径 颜色
text-shadow:文字阴影
没有扩展半径
颜色透明度
rgba:rgba(r,g,b,opacity[0,1])
transtion
谁动加给谁 加给父级或者自己
transition:时间 运动属性 运动形式 延迟时间
时间单位:s ms
运动属性：width all(一般都写all)
运动形式:ease(缓冲)
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速
渐变
线性渐变 加给背景
-webkit-linear-gradient(角度，方向,颜色)
角度:deg 不能是px
方向：默认 top left/right/bottom
径向渐变
-kebkit-radial-gradient(方向,形状,颜色)
形状:默认 椭圆ellipse 圆circle
方向：默认 center left/top/right/bottom/
角度:px 不能是deg
颜色可以限定范围 px/%
重复渐变/*必须给起点*/
-webkit-repeating-linear/radial-gradient(red 0px,red 10px, green 10px, green 20px)
蒙版
1 图片蒙版
-webkit-mask:url(xxx.png) 图片必须是png
2 渐变蒙版
-webkit-mask: -webkit-linear-gradient(colors)
3 文字蒙版
-webkit-backgrond-chip:text
color:rgba(0,0,0,0)
transform
1.旋转 rotate(ndeg)
2.扭曲 skew(x,ydeg)
3.缩放 scale(x,y倍数)
4.平移 translate(x,ypx)
平移：%自身宽高的比例进行计算
调整旋转的中心
transform-origin:left center/px/%
transform只对块元素有效
transform:可以给多个！有顺序！
从右往左(从后往前)解析
3D变换:rotate/translate/scale/skewXYZ(
perspective:视距(景深) 600 800 1000 1200
注意:
1.值不能太小也不能太大
2.使用时需要初始化 perspective(800px) rotate(0deg);
事件 ontransitionend 运动完成时
注意：会判断多次，根据需要运动的属性来确认次数
transform-style:preserve-3d
注意：加给父级
动画
1.如何定义动画
@keyframes 动画名称{
0%/from:{
属性起点
}
100%/to:{
属性终点
}
}
-webkit-animation-fill-mode:forwards:运动停留在终点
2.如何使用动画
animation：名字 2s ease 次数;
animation-iteration-count:infinite无限运动
animation-direction:alternate:往返运动 /reverse:从终点开始回到起点
animation-play-state:paused暂停/running运行
-webkit-animation-delay:2s延迟
animation-timing-function:运动形式
