CSS3属性之二：box-shadow

语法：

box-shadow：<length> <length> <length> <length> || <color>

取值：

<length> <length> <length>? <length>? || <color>：

阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色 

说明：

设置块阴影

box-shadow这个属性应用的非常普遍，可以使你的元素立刻变得漂亮起来，只是记得不要把值设得太离谱。

box-shadow的四个参数：

x-offset                         x轴偏移

y-offset                         y轴偏移

blur                          　　模糊值

color of shadow               阴影颜色

下面来看一个例子，代码如下：

    
    

     
     <!
     
     DOCTYPE html
     
     >
     
     

     
     <
     
     html
     
     >
     
     

     
     <
     
     head
     
     >
     
     

     
     <
     
     title
     
     >盒子阴影</
     
     title
     
     >
     
     

     
     <
     
     meta 
     
     charset
     
     ="utf-8"
     
      
     
     />
     
     

     
     <
     
     style
     
     >
     
     
.box 
     
     {
     
     
    width
     
     :
     
     300px
     
     ;
     
     
    height
     
     :
     
     300px
     
     ;
     
     
    background-color
     
     :
     
     #fff
     
     ;
     
     
    
    
     
     /*
     
      设置阴影 
     
     */
     
     
    -webkit-box-shadow
     
     :
     
     1px 1px 3px #292929
     
     ;
     
     
    -moz-box-shadow
     
     :
     
     1px 1px 3px #292929
     
     ;
     
     
    box-shadow
     
     :
     
     1px 1px 3px #292929
     
     ;
     
     

     
     }
     
     

     
     </
     
     style
     
     >
     
     

     
     </
     
     head
     
     >
     
     

     
     <
     
     body
     
     >
     
     

     
     <
     
     div 
     
     class
     
     ="box"
     
     >
     
     

     
     <
     
     br 
     
     /><
     
     br 
     
     /><
     
     br 
     
     /><
     
     br 
     
     />
     
     
看，是不是很有立体感？没有设置边框啊。

     
     </
     
     div
     
     >
     
     

     
     </
     
     body
     
     >
     
     

     
     </
     
     html
     
     >
    
    

运行效果如下（Chrome中）：

还可以一次运用多个box-shadows，这样做会产生一些有趣的效果，看下面这个例子：

    
    

     
     <!
     
     DOCTYPE html
     
     >
     
     

     
     <
     
     html
     
     >
     
     

     
     <
     
     head
     
     >
     
     

     
     <
     
     title
     
     ></
     
     title
     
     >
     
     

     
     <
     
     meta 
     
     charset
     
     ="utf-8"
     
      
     
     />
     
     

     
     <
     
     style
     
     >
     
     
.box 
     
     {
     
     
    width
     
     :
     
     300px
     
     ;
     
     
    height
     
     :
     
     300px
     
     ;
     
     
    background-color
     
     :
     
     #fff
     
     ;
     
     
    
    
     
     /*
     
      设置阴影 
     
     */
     
     
    -webkit-box-shadow
     
     :
     
     1px 1px 3px green, -1px -1px 3px blue
     
     ;
     
     
    -moz-box-shadow
     
     :
     
     1px 1px 3px green, -1px -1px 3px blue
     
     ;
     
     
    box-shadow
     
     :
     
     1px 1px 3px green, -1px -1px 3px blue
     
     ;
     
     

     
     }
     
     

     
     </
     
     style
     
     >
     
     

     
     </
     
     head
     
     >
     
     

     
     <
     
     body
     
     >
     
     

     
     <
     
     div 
     
     class
     
     ="box"
     
     >
     
     

     
     <
     
     br 
     
     /><
     
     br 
     
     /><
     
     br 
     
     /><
     
     br 
     
     />
     
     
看，我有两个颜色的阴影！O(∩_∩)O哈！

     
     </
     
     div
     
     >
     
     

     
     </
     
     body
     
     >
     
     

     
     </
     
     html
     
     >
    
    

运行效果如下（Chrome中）：

可以看到，有两个颜色的阴影。

看下面一个例子：为下面这张图片添加阴影，让其有立体感：

    
    

     
     <!
     
     DOCTYPE html
     
     >
     
     

     
     <
     
     html
     
     >
     
     

     
     <
     
     head
     
     >
     
     

     
     <
     
     title
     
     ></
     
     title
     
     >
     
     

     
     <
     
     meta 
     
     charset
     
     ="utf-8"
     
      
     
     />
     
     

     
     <
     
     style
     
     >
     
     
body 
     
     {
     
     
    width
     
     :
     
     500px
     
     ;
     
     
    margin
     
     :
     
     50px auto
     
     ;
     
     

     
     }
     
     
.box 
     
     {
     
     
    position
     
     :
     
     relative
     
     ;
     
     
    -webkit-box-shadow
     
     :
     
     1px 2px 4px rgba(0, 0, 0, 0.5)
     
     ;
     
     
    -moz-box-shadow
     
     :
     
     1px 2px 4px rgba(0, 0, 0, 0.5)
     
     ;
     
     
    box-shadow
     
     :
     
     1px 2px 4px rgba(0, 0, 0, 0.5)
     
     ;
     
     
    padding
     
     :
     
     10px
     
     ;
     
     
    background
     
     :
     
     #fff
     
     ;
     
     

     
     }
     
     
.box img 
     
     {
     
     
    width
     
     :
     
     100%
     
     ;
     
     
    border
     
     :
     
     1px solid #8a4419
     
     ;
     
     
    border-style
     
     :
     
     inset
     
     ;
     
     

     
     }
     
     
.box:after 
     
     {
     
     
    content
     
     :
     
     ''
     
     ;
     
     
    position
     
     :
     
     absolute
     
     ;
     
     
    z-index
     
     :
     
     -1
     
     ;
     
     
    
    
     
     /*
     
      阴影部分  
     
     */
     
     
    -webkit-box-shadow
     
     :
     
     0 15px 20px rgba(0, 0, 0, 0.3)
     
     ;
     
     
    -moz-box-shadow
     
     :
     
     0 15px 20px rgba(0, 0, 0, 0.3)
     
     ;
     
     
    box-shadow
     
     :
     
     0 15px 20px rgba(0, 0, 0, 0.3)
     
     ;
     
     
    
    width
     
     :
     
     70%
     
     ;
     
     
    left
     
     :
     
     15%
     
     ;
     
     
    height
     
     :
     
     100px
     
     ;
     
     
    bottom
     
     :
     
     0
     
     ;
     
     

     
     }
     
     

     
     </
     
     style
     
     >
     
     

     
     </
     
     head
     
     >
     
     

     
     <
     
     body
     
     >
     
     

     
     <
     
     div 
     
     class
     
     ="box"
     
     >
     
     
    
     
     <
     
     img 
     
     src
     
     ="allstar.jpg"
     
      title
     
     ="球星云集"
     
      
     
     />
     
     

     
     </
     
     div
     
     >
     
     

     
     </
     
     body
     
     >
     
     

     
     </
     
     html
     
     >
    
    

运行效果如下（Chrome中）：

以前我吗需要在photoshop中把图片做成这样的效果，现在可以直接用CSS代码来实现了。