代码改变世界

CSS box-shadow

2013-01-09 21:38  lefan  阅读(326)  评论(0)  编辑  收藏  举报

先来看box-shadow的浏览器兼容性，Opera已经支持box-shadow属性。firefox通过私有属性-moz-box-shadow支持。Safari和Chrome通过私有属性-webkit-box-shadow支持。

box-shadow有六个可设值:

    img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 }

1.    阴影水平偏移量：如果该参数为正值，则阴影在box的右边；如果该参数为负，则阴影在box的左边

2.    阴影垂直偏移量：如果该参数为正值，则阴影在box的底部；反之，则在box顶部

3.    阴影模糊距离（大小）：此参数可选，只能是正值。如果该参数值为0，则阴影的边缘犀利；该值越大，阴影的边缘越模糊

4.    阴影扩展距离：此参数可选。如果该参数为正，则整个阴影都延展扩大；反之，则缩小。

5.    阴影颜色：此参数可选。如果不写，则会选取默认颜色。至于默认颜色会是什么，不清楚（在webkit核心下为无色，即透明），建议不要省略该值。

6.    阴影类型：此参数可选。有唯一值‘inset’，如果存在该值，那么阴影将为内阴影；如果不写该值，则为缺省的外阴影。

box-shadow的特征：通过对阴影偏移量的设置，可以使得阴影出现在“上、右、下、左”任一方向；阴影大小、边缘模糊、颜色可自定义；可设置内阴影及外阴影；可设置“多组”阴影。

下面是个小例子

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title></title>
 5             <meta charset="utf-8" />
 6                 <style>
 7                     body {
 8                         width:500px;
 9                         margin:50px auto;
10                     }
11                     .box {
12                         position:relative;
13                         -webkit-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
14                         -moz-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
15                         box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
16                         padding:10px;
17                         background:#fff;
18                     }
19                     .box img {
20                         width:100%;
21                         border:1px solid #8a4419;
22                         border-style:inset;
23                     }
24                     .box:after {
25                         content:'';
26                         position:absolute;
27                         z-index:-1;
28                         
29                         /* box-shadow  */
30                         -webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
31                         -moz-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
32                         box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
33                         
34                         width:70%;
35                         left:15%;
36                         height:100px;
37                         bottom:0;
38                     }
39               </style>
40     </head>
41     <body>
42     　　<div class="box">
43     　　　　<img src="text.jpg" title="蛇年邮票" />
44     　　</div>
45     </body>
46 </html>

demo:

 

关于CSS3 box-shadow的一些资料

 CSS3属性之二：box-shadow

http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html

 CSS3属性box-shadow详解

http://www.jzxue.com/wangyesheji/css/201103/30-6950.html