zoukankan      html  css  js  c++  java
  • box-shadow参数以及使用

    参数:box-shadow:none | [inset  x-offset y-offset blur-radius spread-radius color], [inset  x-offset y-offset blur-radius spread-radius color] 

    text-shadow 的用法和box-shadow一样。。。。

    box-shadow属性可以使用一个或多个投影,如果使用多个投影时必须使用逗号“,”隔开。

    例如:

    div
    {
    300px;
    height:100px;

    -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
    box-shadow: 10px 10px 5px #888888;
    }

    表明:颜色为#888888的阴影向下向右外面偏移,模糊为5像素



    其中的参数说明如下:


    none:默认值,元素没有任何阴影效果。


    inset:阴影类型,可选值。如果不设置,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是给元素设置内阴影。


    x-offset:阴影水平偏移量,其值可以是正负值。如果取正值,则阴影在元素的右边,反之取负值,阴影在元素的左边。


    y-offset:阴影垂直偏移量,其值可以是正负值。如果取正值,则阴影在元素的底部,反之取负值,阴影在元素的顶部。


    blur-radius:阴影模糊半径,可选参数。其值只能是正值,如果取值为“0”时,表示阴影不具有模糊效果,如果取值越大,阴影的边缘就越模糊。


    spread-radius:阴影扩展半径,可选参数。其值可以是正负值,如果取值为正值,则整个阴影都延展扩大,反之取值为负值,则整个阴影都缩小。


    color:阴影颜色,可选参数,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在Webkit内核下的浏览器将无色,也就是透明,建议不要省略这个参数。
     
     
  • 相关阅读:
    MOSS发生“未能转换部分或所有标识引用”错误的处理
    Excel嵌入网页(二) 转载
    GridView的PagerTemplate分页
    深入探讨:如何理解.Net的三层架构(转)
    IIS报Service Unavailable错的解决方案
    浅谈C#托管程序中的资源释放问题(转)
    C#程序节省内存
    网页中嵌入Excel控件(补充)
    解决ajax的status=0问题
    翻开我的博客之旅
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/6797192.html
Copyright © 2011-2022 走看看