CSS深度操作（3）

一、IE的兼容

兼容
    
    
    

    

    

    

    */

属性
  
            希望黄色背景只在IE6中生效
                在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
            */
            /*_background-color: yellow;*/
            /*添加了*的样式只有IE7及以下的浏览器认识*/
            /**background-color: yellow;*/
            /*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
            /*background-color: yellow\0;*/
            /*
            CSS Hack不到万不得已的情况尽量不要使用
            */
  
/*
        在选择器前添加* html 则该选择器只有IE6可以识别
        */
        * html body{
            background-color: #bfa;
        }

二、过度动画

在transition中写入多个

三、圆角and阴影and透明度

圆角

    .box{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
            /*border-top-left-radius: 100px;
            border-top-right-radius: 100px;左、右上角为正圆圆角*/
            /*border-radius: 40px;曲率半径为40的圆角矩形*/
            /*border-radius: 20%;最大200px，20%即40px*/
            border-radius: 50%;/*正圆*/
        }

• 阴影

    .box{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
            box-shadow: 10px 10px 10px 0px #bfa;
        }

• 透明度

    .box4{
        /*背景透明 */
        background: rgba(255,215,0,0.3);
        border: 2px solid rgba(0,0,0,0.3);
        }

四、运动曲线

linner	匀速
ease	开始结束慢，中间匀速
ease-in	开始慢速，结尾突然停住
ease-out	突然开始，结束慢速
ease-in-out	开始和结束都是慢速
cubic-bezier	贝塞尔曲线