Box-shadow 陰影

使用這個屬性可以讓頁面更有立體感，給元素添加一個陰影，使得元素看起來是懸浮在原來的位置，下面就看看它的用法吧。

1. 官方定義

Box-shadow 屬性向框添加一個或多個陰影。

2. 解釋

通過 Box-shadow 可以給任意 H5 元素添加陰影，可以是一個，如果用,號隔開可以添加多個。

3. 語法

Box-shadow:h-shadow v-shadow blur color;

.demo{
    Box-shadow:px px px #ccc;
}

屬性值

5. 兼容性

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 Box-shadow 屬性。

6. 實例

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

1. 給demo添加一個陰影。

.demo{
    width: px;
    height: px;
    text-align: center;
    line-height: px;
    Box-shadow: px px px #ccc;
}

效果圖

2. 給demo添加多個陰影。

.demo{
    width: px;
    height: px;
    text-align: center;
    line-height: px;
    Box-shadow: px px px #ccc,px px px rgba(, , ,),px px px rgba(, , , ) ;
}

效果圖

7. 經驗分享

它的一把用來給元素添加一個陰影，交互設計師們熱衷于在鼠標覆蓋到元素時候，給元素增加一個懸浮效果，使它變得不同，例如:

.demo{
    width:px;
    height:px;
    transition: Box-shadow s;
}
.demo:hover{
     Box-shadow: px px px #ccc；
}

而網上常見的 css3 下雨效果，就是利用 Box-shadow 顏色疊加的特性制作出來的。

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

.demo{
    width: px;
    height: px;
    border-radius: ;
    Box-shadow: px px px #dedede, px px px #dedede,px px px #dedede,px px px #dedede;
}

效果圖

如果畫得密集些就更像了，當然這些就需要專業的設計師去做一個方案了。

最后這里介紹一下陰影效果使用的竅門。

.demo{
      width: px;
      height: px; 
      text-align: center;
      line-height: px;;           
      Box-shadow:  px  px -px #000, -px  px -px #000;
}

效果圖

看完這個例子，我們應該已經明白 Box-shadow 形成的陰影效果可能是一個組合。

8. 小結

1. 如果給一個元素添加多個陰影，那么后面的顏色層級高于前面的，也就是說如果前 3 個參數一樣，后面的顏色會覆蓋前面的顏色。

2. 不要給不規則的圖形添加陰影，因為這只會添加到塊級元素中，不會驗證圖片的路徑添加陰影，可以使用濾鏡來達到這樣的效果。