CSS3的box-shadow属性设置块阴影

box-shadow的语法是这样的:

[box-shadow:inset x-offset y-offset blur-radius spread-radius color;]

用汉语解析就是:

[box-shadow:投影类型 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;]

下面我们分别介绍一下这几个参数:

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

X轴偏移量:可取正值也可取负值。当取正值时,阴影在对象右边;反之,阴影在对象左边

Y轴偏移量:可取正值也可取负值。当取正值时,阴影在对象下边;反之,阴影在对象上边

阴影模糊半径:可选值。当取0时,其阴影没有模糊效果,取值越大阴影越模糊

阴影扩展半径:可选值,可取正值也可取负值。当取正值时,阴影随取值的增大而变大;当取负值时,阴影随取值的减小而缩小

阴影颜色:可选值,但此值省略时,会取浏览器默认色,各浏览器的默认色不一样

另外,box-shadow还可以使用一个或多个投影,如果使用多个投影时需要用逗号“,”分开,如:box-shadow:3px 3px 5px #666,-2px -2px 4px #ff0000;

posted @ 2014-07-07 10:59  我寺神经病  阅读(285)  评论(0)    收藏  举报