一、浏览器前缀
1、css3属性：预览版，还没有一个正式的最终版，多以有很多的兼容性问题，浏览器不识别。
浏览器为了使这些属性兼容，每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则，浏览器兼容前缀。
主流浏览器：谷歌 火狐 苹果 欧朋 ie
2、浏览器前缀：
-webkit- 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀
-moz- 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀 -ms- IE浏览器专属的CSS属性需添加-ms-前缀
-o-欧朋浏览器
3、盒子阴影 box-shadow:0px 0px 0px 0px red; 水平偏移量 垂直偏移量 模糊度 模糊大小 颜色 ；
二、css3渐变
css3渐变：由浏览器生成的
1、单一方向渐变： background:-webkit-linear-gradient(left,red,yellow,pink); 方向，颜色1，颜色2.......
background:linear-gradient(to left,red,yellow,pink);
方向：left/right/top/bottom/ 从左/右/上/下边开始 注：必须添加兼容前缀
to left/to right/to top/to bottom 到左边/右边/顶部/底部（结束位置） 注：不要添加兼容位置
2、对角渐变：background:-webkit-linear-gradient(left top,red,yellow,pink);
background:linear-gradient(to right top,red,yellow,pink);
方向：left top/bottom right top/bottom 注：不要添加兼容位置
to left top/bottom to right top/bottom 注：不要添加兼容位置
角度的渐变 10deg 10度
默认情况下颜色趋于均分
可以指定颜色分布的百分比，让颜色按照百分比进行渐变
blue 10% 到10%都是蓝色
red 10px ，blue 50px; 到10px都是红色,10px到50px颜色从红到蓝渐变
3、径向渐变：（一定要加浏览器前缀） 从一个点到四周的渐变,形状默认是椭圆
background:-webkit-radial-gradient(渐变位置，形状，大小，颜色1，颜色2，颜色3);默认从中心到四周
渐变位置：left/top/bottom/right 从左/上/下/右到四周的渐变
left top /bottom ...... 从左上/下角到四周的渐变......
10px 30px 距离左边10px，距离上边30px.
形状：默认椭圆 ellipse 正圆 circle 注意：元素是正方形，则都是正圆
大小：closest-side 最近边 farthest-side 最远边 closest-corner 最近角 farthest-corner 最远角
4、渐变重复：repeating-
（1）线性渐变
（2）径向渐变
补充：渐变用的背景属性是background-img
5、过渡：让元素的动画发生平滑效果，而不是生硬直接的效果
（1）什么属性在做动画 transition-property:margin-left/width; transition-property:属性1，属性2，属性3...; 属性：宽高，背景等
（2）过渡时间需要多久 transition-duration:2s;
（3）等待时间 transition-delay:3s;
（4）动画类型 transition-timing-function:linear/ease/ease-in ; 匀速/逐渐慢下来/加速运动
综合写法： transition: wisth 0.5s 2s ;如果有两个秒值，第一个是运动时间，第二个是等待时间。如果是一个，为运动时间。
三、2d
css3中的2d:二维的平面空间
1、css3 2d 属性
变形属性 transform: ;
2d变换：
位移 transform:translate(); 默认情况：正直从上往下，从左往右
transform:translate(100px,50px);/*水平位移，垂直位移*/
transform:translate(100px);/*水平位移*/
transform:translateX(10px);/*水平位移*/
transform:translateY(10px);/*垂直位移*/
旋转 transform:rotate(); 旋转是一个度数 deg
默认情况 中心点为旋转点
旋转基点:
transform-origin:水平值 垂直值;/*设置旋转基点*/
left right top bottom 具体像素值
缩放 transform:scale();
transform:scale(水平垂直都缩）；
transform:scale(水平缩放,垂直缩放)
transform:scaleY(垂直缩放);
transform:scaleX(水平缩放);
取值范围: 0-0.9999999 缩小 1 原来大小 大于1 放大
倾斜transform:skew();
transform:skew(80deg);一个值水平倾斜
transform:skew(80deg 60deg); 水平倾斜 垂直倾斜
transform:skewX()；
transform:skewY(80deg);
2、opacity:透明;
取值范围: 0-1 0完全透明 1完全不透明 能取小数
3、多功能组合应用
transform:translate(100px) scale(2) rotate(30deg);