现在的位置: 首页 > 综合 > 正文

css3.0抢先看(四):box-shadow创造酷炫的模糊阴影

2012年09月05日 ⁄ 综合 ⁄ 共 475字 ⁄ 字号 评论关闭

文章来自www.css3s.cn

css3.0的background和border模块增加了个很酷的属性box-shadow,显然从名称就能猜出是制造阴影效果的。目前只能被safari3浏览器所支持。大家看了下面的例子就知道是怎么一回事了。 

例子一:

Safari 3 的用户能在这里看到5个像素模糊的背影

 CSS 代码如下:

-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
说明:-webkit-box-shadow: 10px 10px 5px #888中的参数分别表示:阴影水平偏移值(可取正负值,本例中是
10px);阴影垂直偏移值(可取正负值,本例中是10px);阴影模糊值(本例中是5px);阴影颜色(本例是#888)。
例子二:
Safari 3 的用户能在这里看到纯黑色的的背影
 
css代码如下:
-webkit-box-shadow: -10px -10px 0px #000;
-webkit-border-radius: 5px;
padding: 5px 5px 5px 15px;

文章来自www.css3s.cn

抱歉!评论已关闭.