CSS3设置对象（区块/背景）阴影效果box-shadow的语法规则及实例

　　CSS3增加了不少新属性，box-shadow 就是其中之一，从字面意来看是箱子阴影的意思，也就是设置对象的阴影效果，具体就是设置某一区块（有无背景均可）的阴影效果。

　　box-shadow 给区块设置阴影与 Photoshop 给文字设置阴影效果十分相似，都可以设置外阴影和内阴影，阴影扩展范围、模糊程度，参数比较丰富，效果可以与图片处理软件相提并论。

 

　　一、box-shadow 语法规则

　　box-shadow: none | <shadow> [, <shadow> * ]

　　<shadow> = inset? && [ <length>{2,4} && <color>? ]

 

　　二、语法规则说明

　　1、box-shadow 可设置多组效果：

　　A、none：不设置阴影效果；

　　B、第一个<shadow>：设置第一组阴影效果；

　　[] 中的 <shadow>：设置第二组阴影效果，可以省略；

　　C、*表示可以设置多个 <shadow>，即设置多组阴影。

 

　　2、shadow 有三个参数，其意分别为：

　　A、inset 表示设置内阴影，省略时表示外阴影；

 

　　B、length 设置阴影扩展范围和模糊程度，至少设置两个值，最多允许设置四个值；

　　length 第一二个值：分别表示对象阴影水平和垂直偏移值，可取正负值；

　　length 第三个值：表示对象阴影的模糊值，只能取正值；

　　length 第四个值：表示对象阴影的外延值，只能取正值；

 

 

　　三、CSS3设置对象（区块/背景）实例

　　html代码：

　　<ul class="boxShadow">
　　　<li class="outShadow">常规外阴影效果</li>
　　　<li class="outShadow3">边缘模糊外阴影效果</li>
　　　<li class="outShadow4">边缘模糊且外延外阴影效果</li>

　　　<li class="inShadow">常规内阴影效果</li>
　　　<li class="inShadow3">边缘模糊内阴影效果</li>
　　　<li class="inShadow4">边缘模糊且外延内阴影效果</li>

　　　<li class="multipleOutshadow">多组外阴影效果</li>
　　</ul>

 

　　CSS样式：

　　<style type="text/css">
　　.boxShadow li{margin-top:16px;list-style:none;width:600px;padding:10px;line-height:24px;background:#f0f0f0;border:1px solid #e2e0e0;}
　　.boxShadow .outShadow{box-shadow:3px 3px rgba(200, 199, 199, .8);}
　　.boxShadow .outShadow3{box-shadow:4px 4px 6px rgba(200, 199, 199, .8);}
　　.boxShadow .outShadow4{box-shadow:3px 3px 10px 5px rgba(200, 199, 199, .8);}

　　.boxShadow .inShadow{box-shadow:3px 3px rgba(200, 199, 199, .8) inset;}
　　.boxShadow .inShadow3{box-shadow:3px 3px 6px rgba(200, 199, 199, .8) inset;}
　　.boxShadow .inShadow4{box-shadow:1px 1px 6px 4px rgba(200, 199, 199, .8) inset;}

　　.boxShadow .multipleOutshadow{
　　　box-shadow:1px 1px 2px 2px rgba(64, 242, 55, .7),
　　　　　　　　　2px 2px 3px 3px rgba(242, 161, 55, .8),
　　　　　　　　　3px 3px 4px 4px rgba(21, 93, 240, .8),
　　　　　　　　　0 0 5px 5px rgba(240, 21, 67, .8);
　　}

 

　　粗略设置效果图：

• 常规外阴影效果：
  box-shadow:5px 5px rgba(200, 199, 199, .8);
• 边缘模糊外阴影效果：
  box-shadow:5px 5px 5px rgba(200, 199, 199, .8);
• 边缘模糊且外延外阴影效果：
  box-shadow:5px 5px 5px 10px rgba(200, 199, 199, .8);
• 常规内阴影效果：
  box-shadow::3px 3px rgba(200, 199, 199, .8) inset;
• 边缘模糊内阴影效果：
  box-shadow:3px 3px 6px rgba(200, 199, 199, .8) inset;
• 边缘模糊且外延内阴影效果：
  1px 1px 6px 4px rgba(200, 199, 199, .8) inset;
• 多组外阴影效果：
  1px 1px 2px 2px rgba(64, 242, 55, .7),
  2px 2px 3px 3px rgba(242, 161, 55, .8),
  3px 3px 4px 4px rgba(21, 93, 240, .8),
  0 0 5px 5px rgba(240, 21, 67, .8);