box-shadow 陰影

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

1. 官方定義

box-shadow 屬性向框添加一個(gè)或多個(gè)陰影。

2. 慕課解釋

通過(guò) box-shadow 可以給任意 H5 元素添加陰影，可以是一個(gè)，如果用,號(hào)隔開(kāi)可以添加多個(gè)。

3. 語(yǔ)法

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

.demo{
    box-shadow:1px 1px 5px #ccc;
}

屬性值

5. 兼容性

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

6. 實(shí)例

<div class="demo">
慕課網(wǎng)
</div>

1. 給demo添加一個(gè)陰影。

.demo{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    box-shadow: 1px 1px 5px #ccc;
}

效果圖

2. 給demo添加多個(gè)陰影。

.demo{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    box-shadow: 1px 1px 5px #ccc,2px 2px 5px rgba(255, 25, 25,.5),3px 3px 1px rgba(5, 206, 89, 0.5) ;
}

效果圖

7. 經(jīng)驗(yàn)分享

它的一把用來(lái)給元素添加一個(gè)陰影，交互設(shè)計(jì)師們熱衷于在鼠標(biāo)覆蓋到元素時(shí)候，給元素增加一個(gè)懸浮效果，使它變得不同，例如:

.demo{
    width:100px;
    height:100px;
    transition: box-shadow 1s;
}
.demo:hover{
     box-shadow: 1px 1px 5px #ccc；
}

而網(wǎng)上常見(jiàn)的 css3 下雨效果，就是利用 box-shadow 顏色疊加的特性制作出來(lái)的。

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

.demo{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 100px 100px 4px #dedede, 30px 40px 4px #dedede,70px 20px 4px #dedede,80px 60px 4px #dedede;
}

效果圖

如果畫(huà)得密集些就更像了，當(dāng)然這些就需要專(zhuān)業(yè)的設(shè)計(jì)師去做一個(gè)方案了。

最后這里介紹一下陰影效果使用的竅門(mén)。

.demo{
            width: 100px;
            height: 100px; 
            text-align: center;
            line-height: 100px;;           
            box-shadow:  15px 0 15px -15px #000, -15px 0 15px -15px #000;
        }

效果圖

看完這個(gè)例子，我們應(yīng)該已經(jīng)明白 box-shadow 形成的陰影效果可能是一個(gè)組合。

8. 小結(jié)

1. 如果給一個(gè)元素添加多個(gè)陰影，那么后面的顏色層級(jí)高于前面的，也就是說(shuō)如果前 3 個(gè)參數(shù)一樣，后面的顏色會(huì)覆蓋前面的顏色。
2. 不要給不規(guī)則的圖形添加陰影，因?yàn)檫@只會(huì)添加到塊級(jí)元素中，不會(huì)驗(yàn)證圖片的路徑添加陰影，可以使用濾鏡來(lái)達(dá)到這樣的效果。