css3新增特性

css3圆角
border-radius: 10px;
border-top-left-radius: 10px;
左上角圆角(单个圆角设置，先写上下，再写左右)
正圆圆角，宽高相等，设置border-radius是宽高的值
css3盒子阴影
box-shadow:3px 8px 21px 8px;
第一个值，水平位置，正右负左，0最中间
第二个值，垂直位置，正下负上，0中间
第三个值，模糊程度，值越大越模糊
第四个值，范围，值大范围大
文字阴影
text-shadow: 0px 0px 5px 0px;
背景渐变
线性渐变
background: linear-gradient(blue,orange);
从左到右background: linear-gradient(to right,blue,orange);
linear直线gradient
径向渐变
background:radial-gradient(blue,orange)
css3过渡
transition后面加时间
transition:all 2s;
all所有是包括所有改变的属性

2d转换 transform
2d是两个轴X Y(X正右负左，Y正下负上)
1.位移 translate
transform: translate(100px，200px);X(向右) Y(向下) 轴同时移动
transform: translateX(-200px);
transform: translateY(-200px);
2.旋转 rotate （deg是度数的单位）
transform:rotate(720deg);XY同时顺时针旋转720度，正值是顺时针，负值时逆时针
transform:rotateX(720deg);X旋转720度
transform:rotateY(720deg);y旋转720度

旋转基点transform-orignin:left/center/right/top/bottom
水平top/center/bottom
垂直left/center/right

3.缩放 scale
transform: scale(0.5,0.5)xy同时缩小一半
transform: scaleX(2)X轴放大两倍
transform: scaleY(1.5)放大了1.5倍
4.倾斜 skew(正时顺时针，负时逆时针)
transform:skew(-30deg,45deg)x轴逆时针倾斜30度，y轴顺时针倾斜45度
transform:skewX(45deg)X轴倾斜45度
transform:skewY(45deg)Y轴倾斜45度
5.矩阵 martix

将上面4个效果合到一起，空格隔开
transform:translateY(200px) rotate(720deg) scale(0.5,0.5) skew(-30deg,45deg);

3d转换
动画
弹性盒子
@media多媒体查询(响应式布局)