zoukankan      html  css  js  c++  java
  • CSS3: box-shadow 阴影

    box-shadow是给元素块添加周边阴影效果

    语法:

    对象选择器 {box-shadow:X轴偏移量 Y轴偏移量阴影 模糊半径 阴影扩展半径 阴影颜色 [投影方式] }

    box-shadow: h-shadow v-shadow blur spread color inset;
    描述
    h-shadow 水平阴影的位置 ,必需
    v-shadow 垂直阴影的位置,必需
    blur 模糊距离
    spread 阴影的尺寸
    color 阴影颜色
    inset 内部阴影 ,默认是外部阴影

    使用方法:

    .box{
            /*Firefox*/
        -moz-box-shadow:h-shadow v-shadow blur spread color inset;
            /*Safari and Chorm*/
        -webkit-box-shadow:h-shadow v-shadow blur spread color inset;
    
        box-shadow:h-shadow v-shadow blur spread color inset;
        
    }

    1、不指定属性阴影颜色的情况下,阴影在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色,因此养成良好习惯,最好还是指定下颜色比较好。

    2、不偏移,阴影大小/模糊半径20px,

    box-shadow: 0 0 20px #0cc;
    等同于
    box-shadow: 0 0 20px rgb(0,204,204);

    颜色值有两种写法,一个是rgb的写法,一个是16进制的写法

    3、颜色加透明度,用rgba

    box-shadow: 0 0 20px rgba(0,204,204,.5);

    4、模糊度0,阴影扩展半径10px

    box-shadow: 0 0 0 10px #0cc;

     5、把默认的外阴影变成内阴影

    box-shadow:inset 0 0 20px 10px #0cc;
    或
    box-shadow:0 0 20px 10px #0cc inset ;

    6、多个阴影,最先写的显示在最顶层

      box-shadow:0 0 10px 5px green,
             0 0 10px 20px red,
             0 0 10px 30px blue;

    7、IE下的box-shadow

    在IE下设置阴影,用到它的shadow滤镜,也只有IE才有,好无聊吧

    基本语法:

    filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值),Strength=阴影半径(数值)); 还必须配合background属性使用,否则无效

        /*for ie6,7,8*/ 
         filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5); 
        background-color: #ccc; 

    =======================================================================

    一个完整的兼容的box-shadow,应该这样写是:

    .box{
    filter: progid:DXImageTransform.Microsoft.Shadow(color=’#0cc′, Direction=135, Strength=5);/*for ie6,7,8*/
    
    background-color: #ccc;
    
    -moz-box-shadow:2px 2px 5px #0cc;/*firefox*/
    
    -webkit-box-shadow:2px 2px 5px #0cc;/*webkit*/
    
    box-shadow:2px 2px 5px #0cc;/*opera或ie9*/ 
    }
  • 相关阅读:
    dubbo熔断,限流,服务降级
    jmeter命令行运行与生成报告
    Java堆内存设置
    性能测试之互联网应用需求建模分析
    java命令--jmap命令使用(查找内存泄漏对象)
    WPS宏不可用解决方法
    JDBC
    异常
    Java中常用集合操作
    java抽象、接口 和final
  • 原文地址:https://www.cnblogs.com/tinyphp/p/4762451.html
Copyright © 2011-2022 走看看