• CSS3属性值box-shadow使用

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 语法:

    box-shadow<length> <length> <length> <length> || <color>

    • box-shadow浏览器兼容性:
    • Opera: 不知道是从哪个版本开始支持的,不过Opera的10.53版本,已经支持box-shadow属性。
    • firefox通过私有属性-moz-box-shadow支持。
    • Safari和Chrome通过私有属性-webkit-box-shadow支持。
    • IE9支持,IE6/7/8都不支持该属性
    • 取值:
    <length> <length> <length>? <length>? || <color>
    阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色 
     
    • 说明:

    设置块阴影

    box-shadow这个属性应用的非常普遍,可以使你的元素立刻变得漂亮起来,只是记得不要把值设得太离谱。

    box-shadow的四个参数:

    x-offset                         x轴偏移

    y-offset                         y轴偏移

    blur                            模糊值

    color of shadow               阴影颜色

    • 效果图对比:

                 

    • CSS源代码:

    -moz-box-shadow:0px 0px 5px #555;

    -webkit-box-shadow:0px 0px 5px #555;

    box-shadow:0px 0px 5px #555;

     

    • 学习元平台中的使用

    写成了class。在/css/lc/style_lc.css中

    在页面中的<img>中添加class="imgBoxShow"调用

     


    • 标签:
    • box-shadow
    • 属性
    • 模糊
    • 颜色
    • 555
    • 偏移
    • 0px
    • 5px
    • css3
    • 支持
    • 阴影
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部