前端（八）

1.条件Hack

    有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，
这时就可以使用CSS Hack来解决该问题
    CSS Hack实际上指的是一种特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器
不能识别，通过这种方式，来为一些浏览器设置特殊的代码
     

    
    条件Hack
        它只对IE浏览器有效，其它的浏览器都会将它识别为注释
        IE10及以上的浏览器已经不支持这种方式


         以下内容只会出现在IE6中
    

    

    

    

    

    

2.属性Hack

假设在IE6中需要将背景颜色设置为黄色才能达到和其它浏览器相同的效果
            
            
            希望黄色背景只在IE6中生效
                在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
            
            _background-color: yellow;

            添加了*的样式只有IE7及以下的浏览器认识
            *background-color: yellow;

            /*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
            background-color: yellow\0;

            
            CSS Hack不到万不得已的情况尽量不要使用

3.选择符
在选择器前添加* html 则该选择器只有IE6可以识别

4.圆角阴影透明度

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

水平偏移 垂直偏移 羽化大小 扩展大小 颜色
            box-shadow: 10px 10px 10px 0px #bfa;

水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
            box-shadow: 0px 0px 20px 2px red inset;

透明度30%，文字也透明了
            opacity: 0.3;

背景色变透明，但文字不会透明
            background-color: rgba(255,215,0,0.3);
            
边框透明
            border: 2px solid rgba(0,0,0,0.3);

5图片文字遮罩

    
    
    


    

        
        

            
图片说明：这是一张动漫图说明：这是一张动漫图说明：这是一张动漫图说明：这是一张动漫图
        
    

运行结果：

6.元素选择

/*旋转方向判断
        1、X轴向右、Y轴向下、Z轴向屏幕外
        2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            margin: 50px auto 0;
            transition: all 500ms ease;
            /*设置盒子按3D空间显示*/
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg);
        }
        .box:hover{
            /*默认沿Z轴旋转*/
            /*transform: rotate(45deg);*/
            /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
            /*transform: perspective(800px) rotateX(45deg);*/
            transform: perspective(800px) rotateY(-45deg);
        }