网络编程
位置:首页>> 网络编程>> 网页设计>> 5个CSS3技术实现设计增强(5)

5个CSS3技术实现设计增强(5)

作者:暴风彬彬 来源:彬Go 发布时间:2009-09-04 17:04:00 

标签:设计,css3,技术

4.盒阴影

目前支持的浏览器:Apple Safari 4+, Firefox 3+, Google Chrome 1+

为某个和元素添加阴影的CSS3属性声明格式与文本阴影相同:

box-shadow: x y blur color;

和文本阴影一样,Mozilla 和 Webkit 也有他们自己的盒阴影规则:


-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

你也可以为某个盒元素添加多个阴影,仍然是使用逗号分隔。



-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75); 

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com