CSS3新特性

1. 圆角

border-radius: 左上 右上 右下 左下;
border-radius: 左上 右上和左下 右下 ;
border-radius: 左上和右下 右上和左下;
barder-radius: 四角 ;

画圆 :
barder-radius : 50% ;

2. 盒阴影

border-shadow : h-shadow v-shadow [模糊度 阴影尺寸 颜色 内部或外部阴影]
默认值为: 外部阴影 outset 可设为 内部阴影 inset

模糊度 不允许负值

3. 字阴影

text-shadow: h-shadow v-shadow [模糊度 颜色]

模糊度 不允许负值

4. 背景渐变

4.1 线性渐变

background : linear-gradient(方向,颜色1,颜色2,...);
         方向默认从上往下  to bottom
         例如：to right   、  to  right  bottom
               deg:弧度
background: linear-gradient(120deg,#ff910e,#ffd037);

4.2 射线渐变 径向渐变 扇形渐变

background: -webkit-radial-gradient(渐变的中心点,渐变的形状,颜色1,颜色2,...)
  默认的渐变中心点在宽高的一半
  默认的渐变形状为椭圆 

5. 转换 transform

注意

1. 作用
   使元素在位置或者形状上发生一定的改变
   比如：位移、旋转、缩放、倾斜
2. 属性
   transform:translate() rotate() scale() skew();

1.位移  单位px
transform:translate(x,y);
        当只取一个值，表示水平方向位移的距离
        当取两个值，表示水平方向和垂直方向位移的距离
        取正值，往右下走；取负值，往左上走
        
transform:translateX();
transform:translateY();

旋转  单位deg（弧度）
transform:rotate(30deg)
        取正值，顺时针旋转，取负值，逆时针旋转

transform-origin:;可以改变旋转的中心点，默认中心点为宽高的一半
        注意：旋转会旋转整个坐标轴，当位移和旋转同时存在，建议位移写在旋转的后面

缩放  取值为number
transform:scale(x,y);
        取值0-1   缩小
        取值>1    放大
        默认值为1

        当只取一个值，表示等比例缩放
        当取两个值，表示水平方向的垂直方向

transform:scaleX();
transform:scaleY();

倾斜  单位deg
transform:skew(xdeg,ydeg);
        当只取一个值，表示水平方向倾斜的弧度
        当取两个值，表示水平和垂直方向
        
transform:skewX();
transform:skewY();
        注意：当transform只取一个属性值得时候，其他三个属性都为默认值

6. 过渡 transition

注意

1. transiton-property 与 transition-duration 是必选属性
2. transition-duration 不能取负值
3. 当简写时，不区分前后顺序，两个时间时，前面的是持续时间，后面的是延迟时间
4. 过渡的作用 : 使元素从一个样式平滑的过渡到另外一个样式
5. 过渡必须有触发事件 例如鼠标悬停、鼠标点击等
6. 可以过渡的属性：
   ①取值为颜色
   ②取值为数值
   ③转换 transform:;
   ④阴影 box-shadow:; text-shadow:;
   ⑤背景渐变

6.1 各属性及其取值

transition-property : ; 过渡的属性 多个属性使用逗号分隔  也可简写为all （触发事件选择器里的全部属性）
transition-duration : ; 过渡的持续时间   单位s|ms（毫秒） 默认值为0
transition-timing-function: ease | ease-in | ease-out | ease-in-out ; 过渡的速度变化类型
                      先加速后减速    加速       减速      先加速后减速 
transition-delay: ;延迟时间  单位s|ms  可以取负值，表示把这段时间的效果直接跳过

6.2 简写

transition : all 持续时间 [ 速度变化类型 延迟时间 ];

7. 动画

7.1 动画与过渡的区别

1. 过渡只能制作简单的动画，动画可以制作复杂的动画
   过渡从一个样式到另外一个样式，动画可以控制过程
2. 过渡必须有触发事件，动画可以没有

7.2 定义动画

@keyframes name { name 是自定义的
    0%|from{
        css样式
    }
    百分比{
        css样式
    }
    100%|to{
            css样式
    }
}

7.3 调用动画

7.3.1 属性

animation-name: ;  动画的名称
animation-duration: ;  持续时间
animation-timing-function: ;  速度变化类型
animation-delay: ;  延迟时间
animation-iteration-count: ;  播放次数
animation-direction : alternate;  播放方向  alteranate  意为偶数次倒序播放
animation-fill-mode : forwards;    动画停在最后一帧  

该属性只能加在触发事件上
animation-play-state: paused（暂停）;  动画播放状态

7.3.2 简写

animation : 动画名称 动画持续时间 [速度变化类型 延迟时间 播放次数 播放方向 动画停在最后一帧];

9.浏览器兼容性问题

9.1 CSS3新特性都支持的

border-radius: ;
border-shadow: ;
text-shadow: ;
transition:;
::before{}
::after{}
[]{}
selector1+selector2{}
selector1~selector2{}

9.2 厂商前缀

浏览器	内核	厂商前缀
谷   歌	blink	-webkit-
safari	webkit	-webkit-
FireFox	gecko	-moz-
IE	trident	-ms-
欧   朋	blink	-o-

使用方式 : 在CSS属性前加厂商前缀即可

9.3 CSS Hack 解决IE678的 兼容性

1）条件注释法

<!--[if 条件]>
<![endif]-->
 eg:
<!--[if IE 6]>
<![endif]-->

2）属性前缀和后缀
前缀 + - _ * #
后缀 \0 \9 \9\0 !important（优先级最高）