CSS3中的box-shadow 属性


用于创建盒子阴影

语法

box-shadow:offset-x offset-y blur spread color position(可选)

offset-x

指定阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边,而负值使阴影出现在元素的左边。

offset-y

指定阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的下边,而负值使阴影出现在元素的上边。

blur

指定阴影的模糊程度,值越大越模糊。

spred

指定阴影的延伸尺寸,值越大,增加的越多。

color

指定了阴影的颜色

position

指定阴影的位置,可以使用inset变成内部阴影

Some Demo


多重阴影

box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

box-shadow: 20px 20px 20px 10px blue;
-20px -20px 20px 10px black

圆形阴影

box-shadow: 20px 20px 20px 10px blue,
border-radius: 50%;

yuanxign .png

声明:coder-syl|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - CSS3中的box-shadow 属性


Carpe Diem and Do what I like