zoukankan      html  css  js  c++  java
  • css3阴影box-shadow学习

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

    基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}

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

    box-shadow属性的参数设置取值:

    1. 阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;
    2. X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
    3. Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
    4. 阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
    5. 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
    6. 阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。
    .box-shadow{
    
             //Firefox4.0-
    
             -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
    
             //Safariand Google chrome10.0-
    
             -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
    
             //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
    
             box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
    
    }

    补充:若为多重阴影,则从内到外:

    box-shadow:0px 0px 0px 3px #bb0a0a,
               0px 0px 0px 6px #2e56bf,
               0px 0px 0px 9px #ea982e;

    引用地址http://blog.csdn.net/freshlover/article/details/7610269

  • 相关阅读:
    如何设计一个安全的对外接口?
    Java架构师必须知道的 6 大设计原则
    Spring Boot 如何快速改造老项目?
    Java 类中可以覆盖静态方法吗?
    Dubbo 的心跳设计,值得学习!
    在滴滴和头条干了 2 年后端开发,太真实…
    别乱提交代码了,看下大厂 Git 提交规范是怎么做的!
    3种骚操作,教你查看 Java 字节码!
    sysbench测试服务器性能
    mysql DDL时出现的锁等待状态
  • 原文地址:https://www.cnblogs.com/crystalmoore/p/5497291.html
Copyright © 2011-2022 走看看