利用CSS3的阴影属性可以在网页的元素上加上阴影效果,这是一种新特性。不过这种特性只在支持CSS3的浏览器上有效果,比如:Firefox3.5,Safari 3.1 +,和谷歌浏览器等。
下面就说说如何使用css3的阴影属性。
css3阴影主要用到了box-shadow属性,该属性的语法格式如下:
box-shadow: <horizontal> <vertical> <blur> <color>
以上各属性值的意思如下:
horizontal(水平):指定水平偏移阴影。正值(即:5px)阴影向右,而为负值(即:- 10px)将使它偏向左。
vertical(垂直):指定垂直偏移阴影。正值(即:5px)会使阴影在框的底部,而负值(即:- 10px)将使它偏向上。
blur(模糊):设置的柔化半径。默认值为0,这意味着没有模糊。正值增加了模糊,而负值,实际上缩小了阴影。此属性默认为0。
clolor(颜色):颜色值,也就是设置阴影颜色。
提醒:该属性可以加在任意元素上,如图片,Div,SPAN,P标签等等都可以。
下面看一个具体的阴影示例,如下是效果示例图和具体的代码:
01 | < html xmlns = "http://www.phpernote.com/" > |
02 | < head > |
03 | < title >CSS3阴影效果实例</ title > |
04 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
05 | < style type = "text/css" > |
06 | #shadow { |
07 | box-shadow: 10px 10px 5px #888888; |
08 | width:500px; |
09 | padding:5px; |
10 | text-align:center; |
11 | font-size:20px; |
12 | background:#21759b; |
13 | margin:0 auto; |
14 | color:#ffffff; |
15 | } |
16 | </ style > |
17 | </ head > |
18 | < body > |
19 | < div id = "shadow" >矩形的 CSS3 的阴影</ div > |
20 | </ body > |
21 | </ html > |