CSS3 box-shadow 屬性及範例

woff · 發表於 2014-12-24 12:06:47

今天我們接著一起來探討一下CSS3中的另一個屬性box-shadow的使用方法。CSS3的box-shadow有點類似於text-shadow，只不過不同的是text-shadow是對象的文本設置陰影，而box-shadow是給對象實現圖層陰影效果。

本文我們擱下IE不談，只談談box-shadow的具體使用方法

語法：

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

複製代碼

box-shadow和text-shadow一樣可以使用一個或多個投影，如果使用多個投影時必須需要用逗號“，”分開。

取值：

box-shadow屬性至多有6個參數設置，他們分別取值：

陰影類型：此參數是一個可選值，如果不設值，其默認的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內陰影，也就是說設置陰影類型為“inset”時，其投影就是內陰影；

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

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

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

陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小

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

瀏覽器的兼容：

我們這裡還涉及到一個各瀏覽器前綴的問題，比如說Mozilla內核的-moz，webkit內核的-webkit。經測試在最新版的Firefox和Google Chrome瀏覽器都無需加上前綴，但在safari中還是需要前緣的，為了能兼容支持的各大瀏覽器，我們在書寫box-shadow的格式應該這樣

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色;

複製代碼

box-shadow的特徵：

較之ps製作出來的圖片相比，CSS3的box-shadow可以通過改變其參數得到不同的效果，如：改變陰影偏移量的設置，我們可以使用陰影只在對象的上下左右的任一邊出現，也可以讓其出現在其中的某幾個邊上;其二可以隨時調節陰影大小，邊緣模糊度，陰影顏色，其三可以隨時更改為內陰影，另外還可以設置多個陰影效果

我們先來看一個簡單的實例：

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

複製代碼

Firefox/Opera下效果

Safari/Chrome下效果

回到上面那個實例，其實在webkit內核的瀏覽器Safari、Google Chrome裡不會有任何陰影效果，雖然W3C標準裡說顏色是可選擇的，但是在沒有給出顏色的時候，safari/chrome和firefox表現不同，在webkit內核的瀏覽器下陰影表現為透明色而mozilla和oprea下表現為黑色。基於這樣的原因，大家在使用box-shadow時不要忘了加上陰影顏色的值。

根據上面的現像，我們來看一個box-shadow有關陰影是否會被計算為內容的實例。

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

複製代碼

我們把外面div設置為100px*100px,裡面div設置為60px*60px，並在裡面的div上加上一個向下向右偏移50px的綠色陰影，我們看看多出來的陰影會怎麼樣？

.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;
}

複製代碼

從各大瀏覽中的效果我們可以看出，陰影多出來的陰影會撐破容器跑出來。標準裡有一張圖，描述了box-shadow的工作方式，這張圖直觀告訴我們如何使用box-shadow

這張圖可以告訴我們很多信息，比如說borer-radius圓角，陰影擴展、陰影模糊以及padding是如何影響對象陰影的：非零值的border-radius將會以相同的作用影響陰影的外形，但border-image不會影響對象陰影的任何外形；對象陰影同box模型的層次一樣，外陰影會在對象背景之下，內陰影會在邊框之下背景之上。所以整個層級就是：邊框>內陰影>背景圖片>背景顏色>外陰影。因為大家都知道，我們的背景圖片是在背景顏色之上的。

IE濾鏡方法：

在前面我們講過，IE9以下是不支持CSS3的box-shadow的，但為了處理這個兼容問題，我們可以在IE下使用IE的shadow陰影濾鏡來實現

filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

複製代碼

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

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

複製代碼

然後你可以創建一個單獨的js文件來處理，或者直接在頁面的<head></head>裡欠入一個<script> </script>，我們這裡就只例出一個直接在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相關基礎知識，那麼下面我們通過一些實例來鞏固一下box-shadow的具體用法：

如果沒有進行特殊說明，我們這裡的實例所用的HTML代碼都如下，只是改變第二個class名稱，如demo1 demo2等：

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

複製代碼

基本的CSS樣式

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

複製代碼

提醒大家：為了節約時間，下面的css代碼中我只寫了一個box-shadow，但是大家在實際應用中一定要記得把:-webkit-box-shadow和-moz-box-shadow加上去，不然在safari和chrome瀏覽器下是會沒有任何效果的，這個我們在前面提過，此處不詳說。

效果一:單邊效果

.dome2 {
box-shadow: -2px 0 0 green, //左边阴影
0 -2px 0 blue, //顶部阴影
0 2px 0 red, //底部阴影
2px 0 0 yellow; //右边阴影
}

複製代碼

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

.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上。所以應用多次陰影的寫法一定要注意其順序問題，特別的當陰影的模糊值不一樣的情況之下，另外有些網站介紹說可以寫成下面的形式，但我經過多個瀏覽器測試，這種寫法是無效的，

.demo4 {
/*这种写法是错误的（，网上有介绍说可以这样书写，但我测试多次未见效果，所以本人提倡不要这样书次，以免造成不必要的错误）*/
box-shadow: -2px 0 0 green,box-shadow: 0 -2px 0 blue,box-shadow: 0 2px 0 red,box-shadow: 2px 0 0 yellow;
}

複製代碼

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

在使用多層次的陰影時還需注意一個細節問題，如果前面的陰影模糊值小於後面的陰影模糊值，那麼前面的顯示在後面之上，如果前面陰影的模糊值大於後面的陰影模糊值，那麼前面的陰影將遮住後面的陰影效果。如下面例子：

/*第一个阴影模糊半径值小于第二阴影模糊半径*/
.demo5 {
box-shadow: 0 0 5px red,0 0 15px blue;
}
/第一个阴影模糊半径大于第二阴影模糊半径*/
.demo6 {
box-shadow: 0 0 15px red, 0 0 5px blue;
}

複製代碼

實例效果再次證明：左圖中我們可以看見紅色陰影在蘭色陰影之上並沒有遮蓋藍色陰影，因為我們紅色的陰影模糊值只有5px，比藍色的15px模糊值要小；而右圖中我們只能看到紅色的陰影，那是因為我們第一個紅色陰影的模糊半徑大於第二個蘭色的模糊半徑，所以紅色的陰影把藍色的陰影遮蓋住了。這一點大家可記住了。

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

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

複製代碼

我們在這裡設置的是HEX值，我們也可以應用css3的rgba值給box-shadow的陰影顏色上，這樣的好處是，box-shadow陰影色多了一個alpha透明值，如下面的實例：

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

複製代碼

對比上面兩個例子，前一個例子我們沒有應用透明值，而後面一個例子我們應用了0.5的透明值，相比之下後面的陰影是不是更淺。當然在實踐應用中您可以根據自己的需求進行設置。

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

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

複製代碼

從效果中大家想想這種效果是不是跟我們在元素中的boder: 1px solid red;屬性產生的效果很相似的呀。對的，box-shadow不單可以製作出陰影的效果，我們還可以利用其擴展半徑這個值，來給對象製作出類似於邊框的樣式。下面我們來看一個對比的實例：

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

複製代碼

實際上利用box-shadow來製作邊框，只能說看上去像邊框，但實質其並非邊框，他和border還是有本質上的區別。從上面的效果圖中我們明顯的可以看出左邊的box要比右邊的box低那麼1px的，這樣一來隨著其擴展半徑值越大，兩者之間的相差就更大，如：

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

複製代碼

我們接著來看demo12和demo13兩個demo在firebug下的layout圖：

結合上圖兩者在firebug下的layout圖，更證實了我們前面所講的陰影不會影響頁面的任何佈局：demo12的邊框被計算了寬度，但demo13的陰影瀏覽器卻忽略不計，所以藉住這個特點，我們陰影所模擬的邊框理可以自由的使用，但必須要注意其層級關係。

前面我們主要舉例說明瞭如何利用box-shadow給對象單邊加上陰影效果、多邊應用陰影效果、四邊同時應用相同的陰影效果以及如何應用陰影模仿對象邊框效果等，這些都是我們box-shadow常用的一些陰影效果，下面我們在來例舉幾個特殊的實例：內陰影inset、body設置陰影和投影drop shadow。

內陰影inset效果：

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

複製代碼

上圖中我們實現了div上添加內陰影的效果，我們這裡要提醒一點的是，img標籤上直接應用box-shadow的inset是沒有任何效果的，為了證實這一點，我們一起來看下面的一個實例：

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

複製代碼

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

複製代碼

上面的效果圖再次證實了我們前面所說的，直接在img元素上使用inset是沒有任何效果的，那麼我們現在來針對這個bug做一次修改，我們把img放到一個div中，然後不直接在img上運用box-shadow屬性，而是在img的父元素div上運用box-shadow，接著我們在給img進行相對定位，並讓其在父元素下一層，如：

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

複製代碼

我們來看其主要的樣式：

.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;
}

複製代碼

根據上面實例思路，我們換過一種實現方法，這種方法我們是在img父元素上應用一上偽元素“:before”來實現：

<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;
}

複製代碼

從效果上看，我們是不是同樣實現了img加box-shadow的inset陰影呀，最後我們在來利用jQuery來解決img內陰影，這種方法的原理是我們通過jQuery把img標籤轉換成一個div元素，同時把img轉換成div元素的背景圖片，然後在這個div元素上應用內陰影，因為我們都知道div上應用內陰影是沒有任何問題的。下面我們就一起來看其實現的方法

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>

複製代碼

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

有關img上使用內陰影的使用方法，你可以參閱CSS Box-Shadow:Inset一文。

給body頂部增加一個陰影

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

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

Drop-shadow效果

Drop-shadow效果，大家在Photoshop中肯定都見識過了，今天我們是來看一個實例，不增加任何元素標籤的情況下，我們主要是利用box-shadow配合元素的兩個偽元素:before和: after以及定位來實現，這種效果支持的瀏覽器現在主要有firefox3.5+/chrome5+/safari5+/opera10.6+/Ie9+。

我們先來了解一下其原理：我們通過box-shadow實現drop shadow效果是僅用一個div標籤元素，然後配合其兩個偽元素":before"和":after"；然後我們分別給其偽元素定位到div的後面，並把box-shadow應用到這兩個偽元素上。具體我們來看其實現步驟：

先來看其html代碼：

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

我定義了一個叫"drop-shadow"的div，現在我們給其應用一個基本樣式

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

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

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

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

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


現在我們只得到了一邊的陰影效果，那我麼們可以通過應用css3 transforms來實現另一邊的效果（有關CSS3的transform屬性使用，我們將在下文介紹）

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

我們現在只需要改變":after"偽元素定位方向。（偽元素":after"在相反方向旋轉，相對於":before"）

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

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

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

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

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

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

box-shadow配合其他CSS3屬性製作出來的實例：demo

岛枫音乐 · 發表於 2015-6-8 13:32:41

交流贴。。。。

品变先变 · 發表於 2015-6-15 09:16:20

路过看看。

帳號		自動登錄		找回密碼
密碼				註冊

[教學] CSS3 box-shadow 屬性及範例

相關帖子

[教學] CSS3 box-shadow 屬性 及 範例

相關帖子

[教學] CSS3 box-shadow 屬性及範例