上一節(jié)我們一起探討了一下CSS3的文字陰影text-shadow的使用方法，今天我們接著一起來(lái)探討一下CSS3中的另一個(gè)屬性box-shadow的使用方法。CSS3的box-shadow有點(diǎn)類似于text-shadow，只不過(guò)不同的是text-shadow是對(duì)象的文本設(shè)置陰影，而box-shadow是給對(duì)象實(shí)現(xiàn)圖層陰影效果。

本文我們擱下IE不談，只談?wù)?a href="http://www./TR/2005/WD-css3-background-20050216/#the-box-shadow" target="_blank">box-shadow的具體使用方法

語(yǔ)法：

E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
換句說(shuō)：
對(duì)象選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色}

box-shadow和text-shadow一樣可以使用一個(gè)或多個(gè)投影，如果使用多個(gè)投影時(shí)必須需要用逗號(hào)“，”分開。

取值：

box-shadow屬性至多有6個(gè)參數(shù)設(shè)置，他們分別取值：

陰影類型：此參數(shù)是一個(gè)可選值，如果不設(shè)值，其默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內(nèi)陰影，也就是說(shuō)設(shè)置陰影類型為“inset”時(shí)，其投影就是內(nèi)陰影；

X-offset:是指陰影水平偏移量其值可以是正負(fù)值可以取正負(fù)值，如果值為正值，則陰影在對(duì)象的右邊，反之其值為負(fù)值時(shí)，陰影在對(duì)象的左邊；

Y-offset:是指陰影的垂直偏移量，其值也可以是正負(fù)值，如果為正值，陰影在對(duì)象的底部，反之其值為負(fù)值時(shí)，陰影在對(duì)象的頂部；

陰影模糊半徑：此參數(shù)是可選，，但其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個(gè)陰影都延展擴(kuò)大，反之值為負(fù)值是，則縮小

陰影顏色：此參數(shù)可選，如果不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無(wú)色，也就是透明，建議不要省略此參數(shù)。

瀏覽器的兼容：

我們這里還涉及到一個(gè)各瀏覽器前綴的問(wèn)題，比如說(shuō)Mozilla內(nèi)核的-moz，webkit內(nèi)核的-webkit。經(jīng)測(cè)試在最新版的Firefox和Google Chrome瀏覽器都無(wú)需加上前綴，但在safari中還是需要前緣的，為了能兼容支持的各大瀏覽器，我們?cè)跁鴮慴ox-shadow的格式應(yīng)該這樣

//Firefox4.0-
-moz-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色;

box-shadow的特征：

較之ps制作出來(lái)的圖片相比，CSS3的box-shadow可以通過(guò)改變其參數(shù)得到不同的效果，如：改變陰影偏移量的設(shè)置，我們可以使用陰影只在對(duì)象的上下左右的任一邊出現(xiàn)，也可以讓其出現(xiàn)在其中的某幾個(gè)邊上;其二可以隨時(shí)調(diào)節(jié)陰影大小，邊緣模糊度，陰影顏色，其三可以隨時(shí)更改為內(nèi)陰影，另外還可以設(shè)置多個(gè)陰影效果

我們先來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：

.demo1 {
  -webkit-box-shadow: 3px 3px 3px;
  -moz-box-shadow: 3px 3px 3px;
  box-shadow: 3px 3px 3px;
}

Firefox/Opera下效果    Safari/Chrome下效果

回到上面那個(gè)實(shí)例，其實(shí)在webkit內(nèi)核的瀏覽器Safari、Google Chrome里不會(huì)有任何陰影效果，雖然W3C標(biāo)準(zhǔn)里說(shuō)顏色是可選擇的，但是在沒(méi)有給出顏色的時(shí)候 ，safari/chrome和firefox表現(xiàn)不同，在webkit內(nèi)核的瀏覽器下陰影表現(xiàn)為透明色而mozilla和oprea下表現(xiàn)為黑色。基于這樣的原因，大家在使用box-shadow時(shí)不要忘了加上陰影顏色的值。

根據(jù)上面的現(xiàn)像，我們來(lái)看一個(gè)box-shadow有關(guān)陰影是否會(huì)被計(jì)算為內(nèi)容的實(shí)例。

<div class="outer">
  <div class="inter"> </div>
</div>   

我們把外面div設(shè)置為100px*100px,里面div設(shè)置為60px*60px，并在里面的div上加上一個(gè)向下向右偏移50px的綠色陰影，我們看看多出來(lái)的陰影會(huì)怎么樣？

  .outer {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
  }
  .inter {
    width: 60px;
    height: 60px;
    margin: 10px auto;
    background: #f69;
    -webkit-box-shadow: 50px 50px green;
    -moz-box-shadow: 50px 50px green;
    box-shadow: 50px 50px green;
  }
 

從各大瀏覽中的效果我們可以看出，陰影多出來(lái)的陰影會(huì)撐破容器跑出來(lái)。標(biāo)準(zhǔn)里有一張圖，描述了box-shadow的工作方式，這張圖直觀告訴我們?nèi)绾问褂胋ox-shadow

這張圖可以告訴我們很多信息，比如說(shuō)borer-radius圓角，陰影擴(kuò)展、陰影模糊以及padding是如何影響對(duì)象陰影的：非零值的border-radius將會(huì)以相同的作用影響陰影的外形，但border-image不會(huì)影響對(duì)象陰影的任何外形；對(duì)象陰影同box模型的層次一樣，外陰影會(huì)在對(duì)象背景之下，內(nèi)陰影會(huì)在邊框之下背景之上。所以整個(gè)層級(jí)就是：邊框>內(nèi)陰影>背景圖片>背景顏色>外陰影。因?yàn)榇蠹叶贾?，我們的背景圖片是在背景顏色之上的。

IE濾鏡方法：

在前面我們講過(guò)，IE9以下是不支持CSS3的box-shadow的，但為了處理這個(gè)兼容問(wèn)題，我們可以在IE下使用IE的shadow陰影濾鏡來(lái)實(shí)現(xiàn)

   filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度（數(shù)值）, Strength=陰影半徑（數(shù)值）);

注意：該濾鏡必須配合background屬性一起使用，否則該濾鏡失效。除了使用濾鏡的方法外，我們還有一種方法可以實(shí)現(xiàn)IE下的效果。那就是使用jQuery的插件jquery.boxshadow.js。那么具體如何使用呢？其實(shí)很簡(jiǎn)單，你先下載這個(gè)jquery.boxshadow.js插件到你的項(xiàng)目中，接著把jquery版本庫(kù)和jquery.boxshadow.js加載到頁(yè)面上，如

   <script type="text/javascript" src="../js/jquery.min.js"></script>
   <script type="text/javascript" src="../js/jquery.boxshadow.js"></script>

然后你可以創(chuàng)建一個(gè)單獨(dú)的js文件來(lái)處理，或者直接在頁(yè)面的<head></head>里欠入一個(gè)<script> </script>，我們這里就只例出一個(gè)直接在head插入的解決辦法：

  $(document).ready(function(){
    if($.browser.msie) {
      $('.demo1').boxShadow(0,0,5,"#888"); //demo1元素使用了box-shadow
      $('.demo2').boxShadow(-10,-10,5,"#f36"); //demo2元素使用了box-shadow
    }
  });

上面我們了解了CSS3的box-shadow相關(guān)基礎(chǔ)知識(shí)，那么下面我們通過(guò)一些實(shí)例來(lái)鞏固一下box-shadow的具體用法：

如果沒(méi)有進(jìn)行特殊說(shuō)明，我們這里的實(shí)例所用的HTML代碼都如下，只是改變第二個(gè)class名稱，如demo1 demo2等：

  <div class="demo demo2></div>

基本的CSS樣式

  .demo {
    width: 100px;
    height: 50px;    
    background: #f69;
  }

提醒大家：為了節(jié)約時(shí)間，下面的css代碼中我只寫了一個(gè)box-shadow，但是大家在實(shí)際應(yīng)用中一定要記得把:-webkit-box-shadow和-moz-box-shadow加上去，不然在safari和chrome瀏覽器下是會(huì)沒(méi)有任何效果的，這個(gè)我們?cè)谇懊嫣徇^(guò)，此處不詳說(shuō)。

效果一:單邊效果

 .dome2 {
   box-shadow: -2px 0 0 green, //左邊陰影
   0 -2px 0 blue, //頂部陰影
   0 2px 0 red, //底部陰影
   2px 0 0 yellow; //右邊陰影
 }

上例中，我們分別對(duì)對(duì)象的四個(gè)邊進(jìn)行了box-shadow的設(shè)置，只不過(guò)我們使用了多層次的box-shadow應(yīng)用，如果只需要在對(duì)象某一邊應(yīng)用陰影時(shí)，我們可以刪除不使用陰影的設(shè)置。給對(duì)象四邊設(shè)計(jì)陰影，我們是通過(guò)改變x-offset和y-offset的正負(fù)值來(lái)實(shí)現(xiàn)，其中x-offset為負(fù)值時(shí)，生成左邊陰影，為正值時(shí)生成右邊陰影，y-offset為正值是生成底部陰影，為負(fù)值時(shí)生成頂部陰影。并且把模糊半徑設(shè)置為0，如果不設(shè)置為0的話那么其他三邊也將會(huì)有陰影，并且此處還涉及到一個(gè)多陰影的順序問(wèn)題。當(dāng)給同一個(gè)元素使用多個(gè)陰影屬性時(shí)，需要注意它的順序，最先寫的陰影將顯示在最頂層，如我們將上面的實(shí)例變一下，給其加上模糊值，將更能看出效果：

  .demo3 {
    box-shadow: -2px 0 5px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;
  }

這樣我們上例中：左邊的放在了第一，其green陰影色在頂邊的blue上，而頂邊的blue在又在右邊的yellow上，右這的yellow卻在底邊的red上。所以應(yīng)用多次陰影的寫法一定要注意其順序問(wèn)題，特別的當(dāng)陰影的模糊值不一樣的情況之下，另外有些網(wǎng)站介紹說(shuō)可以寫成下面的形式，但我經(jīng)過(guò)多個(gè)瀏覽器測(cè)試，這種寫法是無(wú)效的，

  .demo4 {
    /*這種寫法是錯(cuò)誤的（，網(wǎng)上有介紹說(shuō)可以這樣書寫，但我測(cè)試多次未見(jiàn)效果，所以本人提倡不要這樣書次，以免造成不必要的錯(cuò)誤）*/
    box-shadow: -2px 0 0 green,box-shadow: 0 -2px 0 blue,box-shadow: 0 2px 0 red,box-shadow: 2px 0 0 yellow;
  }

從上圖的效果中也再一次證明了上面的寫法是不正確的，希望大家在實(shí)際應(yīng)用中時(shí)一定要注意多層次陰影的書寫方法。同時(shí)也提醒大家在網(wǎng)上看相關(guān)資料時(shí)一定不能盡信，最好是能自己抽空驗(yàn)正一下。

在使用多層次的陰影時(shí)還需注意一個(gè)細(xì)節(jié)問(wèn)題，如果前面的陰影模糊值小于后面的陰影模糊值，那么前面的顯示在后面之上，如果前面陰影的模糊值大于后面的陰影模糊值，那么前面的陰影將遮住后面的陰影效果。如下面例子：

 /*第一個(gè)陰影模糊半徑值小于第二陰影模糊半徑*/
 .demo5 {
   box-shadow: 0 0 5px red,0 0 15px blue;
 }
  
 /第一個(gè)陰影模糊半徑大于第二陰影模糊半徑*/
 .demo6 {
   box-shadow: 0 0 15px red, 0 0 5px blue;
 }

實(shí)例效果再次證明：左圖中我們可以看見(jiàn)紅色陰影在蘭色陰影之上并沒(méi)有遮蓋藍(lán)色陰影，因?yàn)槲覀兗t色的陰影模糊值只有5px，比藍(lán)色的15px模糊值要??；而右圖中我們只能看到紅色的陰影，那是因?yàn)槲覀兊谝粋€(gè)紅色陰影的模糊半徑大于第二個(gè)蘭色的模糊半徑，所以紅色的陰影把藍(lán)色的陰影遮蓋住了。這一點(diǎn)大家可記住了。

效果二：四邊具有相同的陰影效果（只設(shè)置陰影模糊半徑和陰影顏色）

  .demo7 {
    box-shadow: 0 0 5px rgb(250,0,0);
  }

我們?cè)谶@里設(shè)置的是HEX值，我們也可以應(yīng)用css3的rgba值給box-shadow的陰影顏色上，這樣的好處是，box-shadow陰影色多了一個(gè)alpha透明值 ，如下面的實(shí)例：

 .demo8 { 
   box-shadow: 0 0 5px rgba(250,0,0,0.5);
 }

對(duì)比上面兩個(gè)例子，前一個(gè)例子我們沒(méi)有應(yīng)用透明值，而后面一個(gè)例子我們應(yīng)用了0.5的透明值，相比之下后面的陰影是不是更淺。當(dāng)然在實(shí)踐應(yīng)用中您可以根據(jù)自己的需求進(jìn)行設(shè)置。

效果三：四邊具有相同的陰影（只設(shè)置陰影擴(kuò)展半徑和陰影顏色）

 .demo9 {
  box-shadow: 0 0 0 1px red;
 }

從效果中大家想想這種效果是不是跟我們?cè)谠刂械腷oder: 1px solid red;屬性產(chǎn)生的效果很相似的呀。對(duì)的，box-shadow不單可以制作出陰影的效果，我們還可以利用其擴(kuò)展半徑這個(gè)值，來(lái)給對(duì)象制作出類似于邊框的樣式。下面我們來(lái)看一個(gè)對(duì)比的實(shí)例：

  /*邊框效果*/
  .demo10 {
    border: 1px solid red;
  }
  /*陰影效果*/
  .demo11 {
    box-shadow: 0 0 0 1px red;
  }

實(shí)際上利用box-shadow來(lái)制作邊框，只能說(shuō)看上去像邊框，但實(shí)質(zhì)其并非邊框，他和border還是有本質(zhì)上的區(qū)別。從上面的效果圖中我們明顯的可以看出左邊的box要比右邊的box低那么1px的，這樣一來(lái)隨著其擴(kuò)展半徑值越大，兩者之間的相差就更大，如：

 .demo12 {
   border: 20px solid red;
 }
	
 .demo13 {
   box-shadow: 0 0 0 20px red;
 }

我們接著來(lái)看demo12和demo13兩個(gè)demo在firebug下的layout圖：

結(jié)合上圖兩者在firebug下的layout圖，更證實(shí)了我們前面所講的陰影不會(huì)影響頁(yè)面的任何布局：demo12的邊框被計(jì)算了寬度，但demo13的陰影瀏覽器卻忽略不計(jì)，所以借住這個(gè)特點(diǎn)，我們陰影所模擬的邊框理可以自由的使用，但必須要注意其層級(jí)關(guān)系。

前面我們主要舉例說(shuō)明了如何利用box-shadow給對(duì)象單邊加上陰影效果、多邊應(yīng)用陰影效果、四邊同時(shí)應(yīng)用相同的陰影效果以及如何應(yīng)用陰影模仿對(duì)象邊框效果等，這些都是我們box-shadow常用的一些陰影效果，下面我們?cè)趤?lái)例舉幾個(gè)特殊的實(shí)例：內(nèi)陰影inset、body設(shè)置陰影和投影drop shadow。

內(nèi)陰影inset效果：

  .demo14 {
    box-shadow: inset 0 0 10px red;
  }

上圖中我們實(shí)現(xiàn)了div上添加內(nèi)陰影的效果，我們這里要提醒一點(diǎn)的是，img標(biāo)簽上直接應(yīng)用box-shadow的inset是沒(méi)有任何效果的，為了證實(shí)這一點(diǎn)，我們一起來(lái)看下面的一個(gè)實(shí)例：

   <img src="/images/box-shadow-img.png" alt="box shadow img" />

 img {
   box-shadow: inset 0 0 10px red;
 }      

上面的效果圖再次證實(shí)了我們前面所說(shuō)的，直接在img元素上使用inset是沒(méi)有任何效果的，那么我們現(xiàn)在來(lái)針對(duì)這個(gè)bug做一次修改，我們把img放到一個(gè)div中，然后不直接在img上運(yùn)用box-shadow屬性，而是在img的父元素div上運(yùn)用box-shadow，接著我們?cè)诮oimg進(jìn)行相對(duì)定位，并讓其在父元素下一層，如：

   <div class="img-wrap"><img src="/images/box-shadow-img.png" alt="box shadow img" /></div>

我們來(lái)看其主要的樣式：

  .img-wrap {
     -webkit-box-shadow: inset 0 0 10px red;
     -moz-box-shadow: inset 0 0 10px red;
     box-shadow: inset 0 0 10px red;
     display: inline-block;
  }
  .img-wrap img {
    position: relative;
    z-index: -1;
}

根據(jù)上面實(shí)例思路，我們換過(guò)一種實(shí)現(xiàn)方法，這種方法我們是在img父元素上應(yīng)用一上偽元素“:before”來(lái)實(shí)現(xiàn)：

   <div class="shadow"><img src="/images/box-shadow-img.png" alt="box shadow img" /></div>

  .shadow {
    position: relative;
    display: inline-block;
    *display: inline;
  }
  .shadow::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    -moz-box-shadow:inset 0 0 5px 1px red;
    -webkit-box-shadow: inset 0 0 5px 1px red;
    box-shadow: inset 0 0 5px 1px red;
}

從效果上看，我們是不是同樣實(shí)現(xiàn)了img加box-shadow的inset陰影呀，最后我們?cè)趤?lái)利用jQuery來(lái)解決img內(nèi)陰影，這種方法的原理是我們通過(guò)jQuery把img標(biāo)簽轉(zhuǎn)換成一個(gè)div元素，同時(shí)把img轉(zhuǎn)換成div元素的背景圖片，然后在這個(gè)div元素上應(yīng)用內(nèi)陰影，因?yàn)槲覀兌贾纃iv上應(yīng)用內(nèi)陰影是沒(méi)有任何問(wèn)題的。下面我們就一起來(lái)看其實(shí)現(xiàn)的方法

Html Code:

 <img src="/images/box-shadow-img.png" alt="" class="inset-shadow" />

Css Code:

.inset-shadow{
   -moz-box-shadow: 0 0 5px red inset;
   -webkit-box-shadow: 0 0 5px red inset;
   box-shadow: 0 0 5px red inset;
}

jQuery code

  <script type="text/javascript">
    $(document).ready(function(){
       $('img.inset-shadow').each(function(){
          var $img = $(this);
          $img.load(function(){
          var $div = $('<div/>');
          $div.width($img.width());
          $div.height($img.height());
          $div.css('background-image', 'url('+$img.attr('src')+')');
          var display = $img.css('display');
          //If the div is set to inline the width and height will be 0 :(
          //inline-block appears to be the only way around it but it's not
          //supported in all browsers :( The browsers it's not supported in
         //are probably the same ones that don't support box-shadow,
          //so a solution maybe to add a browser check.
         if(display === 'inline'){
            $div.css('display', 'inline-block');
          }else{
            $div.css('display', display);
          }
         $div.attr('class', $img.attr('class'));
         $img.replaceWith($div);
       });
     });
   });
 </script>

大家可以通過(guò)自己的firebug查看其中img的變化。

有關(guān)img上使用內(nèi)陰影的使用方法，你可以參閱CSS Box-Shadow:Inset一文。

給body頂部增加一個(gè)陰影

  body:before {
   content:"";
   position:fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 999;
   box-shadow: 0 0 10px rgba(125,255,125,0.8);
}

這里提醒大家，為了不影響布局，top的取值最好和height的取值一致。只是top使用負(fù)值。利用同樣的方法我們可以給任何一個(gè)元素加上陰影，但相應(yīng)需要改變定位方式興。

Drop-shadow效果

Drop-shadow效果，大家在Photoshop中肯定都見(jiàn)識(shí)過(guò)了，今天我們是來(lái)看一個(gè)實(shí)例，不增加任何元素標(biāo)簽的情況下，我們主要是利用box-shadow配合元素的兩個(gè)偽元素:before和:after以及定位來(lái)實(shí)現(xiàn)，這種效果支持的瀏覽器現(xiàn)在主要有firefox3.5+/chrome5+/safari5+/opera10.6+/Ie9+。

我們先來(lái)了解一下其原理：我們通過(guò)box-shadow實(shí)現(xiàn)drop shadow效果是僅用一個(gè)div標(biāo)簽元素，然后配合其兩個(gè)偽元素":before"和":after"；然后我們分別給其偽元素定位到div的后面，并把box-shadow應(yīng)用到這兩個(gè)偽元素上。具體我們來(lái)看其實(shí)現(xiàn)步驟：

先來(lái)看其html代碼：

 <div class="drop-shadow">drop shadow effect</div>
    

我定義了一個(gè)叫"drop-shadow"的div，現(xiàn)在我們給其應(yīng)用一個(gè)基本樣式

 .drop-shadow {
    width: 300px;
    height: 150px;
    position: relative;
    background: #ccc;        
 }
    

接著我們給drop-shadow的“:before”和":after"定位到drop-shadow下面：

 .drop-shadow:before,
 .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
 }
    

給drop-shadow的":before"和":after"加上陰影效果

 .drop-shadow:before,
 .drop-shadow:after {
     content: "";
     position: absolute;
     z-index: -1;
     bottom: 15px;
     left: 10px;
     width: 50%;
     height: 20%;
     /*add box-shadow*/
     -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
     -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
     box-shadow: 0 15px 10px rgba(125,125,125,0.8);
  }
  

現(xiàn)在我們只得到了一邊的陰影效果，那我么們可以通過(guò)應(yīng)用css3 transforms來(lái)實(shí)現(xiàn)另一邊的效果（有關(guān)CSS3的transform屬性使用，我們將在下文介紹）

 .drop-shadow:before,
 .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
 }
    

我們現(xiàn)在只需要改變":after"偽元素定位方向。（偽元素":after"在相反方向旋轉(zhuǎn)，相對(duì)于":before"）

 .drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
  }
    

Drop shadow最終核心代碼如下所示，只是我們?cè)凇?before”和“:after”中加了一個(gè)"max-width":的限制，

 .drop-shadow {
    width: 300px;
    height: 150px;
    position: relative;
    background: #ccc; 
    margin-left: 100px;       
  }

  .drop-shadow:before,
  .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    max-width: 150px;
    height: 20%;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }

 .drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
 }
    

有關(guān)drop shadow的更多的demo和Pure CSS3 box-shadow page curl effect可以查閱。如果對(duì)drop shadow感興趣，大家可以點(diǎn)擊：Drop Shadows with CSS3和CSS drop-shadows without images查看更詳細(xì)的文檔。

box-shadow配合其他CSS3屬性制作出來(lái)的實(shí)例：demo

那們今天我們有關(guān)CSS3的box-shadow就說(shuō)到這里了，到今天為些我們一起探討和學(xué)習(xí)了CSS3的漸變Gradient、透明色RGBA、圓角border-radius和文本陰影text-shadow，下一節(jié)我們將一起探討CSS3的transform屬性，感興趣的朋友請(qǐng)觀注本注有關(guān)CSS3的博文更新情況，如果你有更好的學(xué)習(xí)想法，或者對(duì)本站介紹的CSS3有更好的建議可以隨時(shí)聯(lián)系我。

更新一：

div {
          filter: 
              progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
              progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
              progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
              progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
      }

使用濾鏡來(lái)實(shí)現(xiàn)IE下的效果，基中“color”為陰影色，“direction”是陰影方向，“strength”是陰影強(qiáng)度。特別注意，顏色“#eeeeee”在此處不能寫成“#eee”，不然會(huì)無(wú)效果。詳細(xì)的請(qǐng)參閱Nick Dunn的《Cross-browser drop shadows using pure CSS》。

下面例出本站有關(guān)于CSS3的文章以供大家方便瀏覽：

第一節(jié)：《CSS3 Gradient》

第二節(jié)：《CSS3 RGBA》

第三節(jié)：《CSS3 Border-radius》

上一節(jié)：《CSS3 Text-shadow》

下一節(jié)：《CSS3 Transform》

第七節(jié)：《CSS3 Transition》

第八節(jié)：《CSS3 Animation》

如需轉(zhuǎn)載煩請(qǐng)注明出處：W3CPLUS