[譯]深刻了解CSS Box Shadow

原文：A Close Look at CSS Box Shadow

CSS的box-shadow能夠被用來給塊級元素一個外陰影或者是內陰影。接下來讓咱們仔細地看一下這個CSS的特性吧。

舉例

下面有三個把CSS的box-shadow屬性使用在div裏的例子。

　例１：簡單的外陰影

下面是是給副標題添加陰影的樣式。

box-shadow:0 0 10px gray;

例2：內陰影

一個內陰影能夠經過使用inset屬性值來渲染出來。

box-shadow:inset 0 0 10px;

例3：偏移外陰影

這個例子中咱們經過水平和垂直方向下和右偏移5px來實現陰影向右下方偏移

box-shadow:5px 5px 10px;

加入你想要陰影向左上方偏移呢？咱們能夠經過將水平和垂直方向的偏移量設置爲-5px，正以下面的例子：

box-shadow:-5px -5px 10px;

既然你已經看到了box-shadow在現實中的使用，接下來讓咱們更加深刻地瞭解一下。

語法

box-shadow的通常語法以下：

box-shadow:[inset] [horizontal offset] [vertical 
offset] [blur radius] [spread distance] [color]

CSS屬性值

CSS的box-shadow可能會有6個屬性值：

1. inset

2. horizontal offset

3. vertical offset

4. blur radius

5. spread distance

6. color

只有兩個屬性是必須的：水平偏移和垂直偏移量。

四個屬性值，水平偏移，垂直偏移，模糊半徑，擴展距離，必須使用CSS長度單元（好比：px,em,%等）

這個顏色值必須是必須是一個顏色單元，好比十六進制值（如：#000000）。

屬性和值總結表

屬性	是否必須	單位	默認值
inset	不是	關鍵詞	沒有指定的時候，陰影默認在外面
水平偏移	是	長度	沒有默認值，必定有指定
垂直偏移	是	長度	沒有默認值，必定要指定
模糊半徑	不是	長度	0
擴展距離	不是	長度	0
顏色	不是	顏色	和box shadow屬性做用的元素的color值同樣

inset

若是inset關鍵詞存在，盒陰影將會放在HTML元素的內部

box-shadow:inset 0 0 5px 5px olive;

做爲對比，這裏是一個沒有inset屬性的box-shadow樣式。

box-shadow:0 0 5px 5px olive;

水平偏移

水平偏移控制了盒子陰影在x軸的偏移。正值會把盒子的陰影向右移動，負值的話會把它向左移動。

下面的例子中，咱們把水平的偏移設置成20px，恰好是水平偏移量的兩倍，因此陰影水平寬度恰好是垂直高度的兩倍。

box-shadow:20px 10px;

垂直偏移

垂直偏移控制了盒陰影在y軸的偏移量。正值會把盒子的陰影向下移動，負值恰好相反會把盒子網上移動。

下面的例子中，垂直的偏移設置成-20px，恰好是水平偏移的兩倍。同時，由於是負值，因此向上移動。

box-shadow:10px -20px;

模糊半徑

這個模糊半徑會影響到陰影的模糊和銳利程度。

模糊半徑是可選的，若是你不指定它，默認值是0.另外，你不能指定它爲負值，這個和水平偏移和垂直偏移不同。

若是模糊半徑是0，盒子陰影會很銳利而且它的顏色是很實的。隨着你不斷的增大這個值，它會變得愈來愈模糊和透明。

下面的例子，模糊半徑被設置成20px，所以模糊度是至關突出。

box-shadow:5px 5px 20px;

擴展距離

這個擴展距離會讓盒子的陰影在各個方向上都會變大或變小。若是它有一個正值，盒子陰影會在各個方向上增長大小。若是是負值，則會在各個方向上收縮。

值得注意的是，由於它的擴展距離是正5，因此會在各個方向上增長10px由於沒有水平和垂直偏移。

box-shadow:0 0 10px 5px;

當擴展距離是負的時候，陰影就會在各個方向上收縮。下面的例子展現當陰影的寬度比盒子小的時候的狀況

box-shadow:0 10px 10px -5px;

　顏色

經過名字你就能夠判斷出來，顏色值會設置盒陰影的顏色。它能夠經過任何能夠表示顏色的方式來表示顏色。是否設置顏色值是可選的。

換句話說，默認狀況下當你沒有指明顏色值，陰影顏色會等於這個盒子對應的html元素的顏色值。好比有一個div的顏色被設置成紅色，這個盒子陰影的顏色也會變成紅色：

color:red;
box-shadow:0 0 10px 5px;

若是你想要設置陰影的顏色和div的顏色不同，能夠經過下面的方式，你會發現儘管你的文字顏色是紅色，盒子陰影顏色依然能夠是藍色。

color:red;
box-shadow:0 0 10px 5px blue;

多陰影效果

這個就是可以讓咱們變得有創造力的CSS屬性。你可以在一個盒子上設置多個陰影。

語法就像下面這樣。

box-shadow: [box shadow properties 1],
 [box shadow properties 2],
 [box shadow properties n];

換句話說，你能夠經過在每一個屬性設置組後面添加逗號(,)來實現多陰影。

下面的例子展現了兩個陰影的狀況，左上方紅色的陰影，右下方藍色的陰影。

box-shadow: -5px -5px 30px 5px red,
         5px 5px 30px 5px blue;

瀏覽器支持

這個CSS的box-shadow屬性有着很好地瀏覽器支持。使用這個屬性在拖後腿的IE瀏覽器也能在IE9之後獲得支持啦。

查看演示