CSS3陰影和反射

對(duì)網(wǎng)頁設(shè)計(jì)人員來說，陰影可能是比較常用的一種用來增強(qiáng)頁面修飾的手段（可能反射用的頻率較少）。在CSS3支持陰影和反射效果之前，大部分的解決方案都是通過圖片來展現(xiàn)所需要的效果，但是我們知道使用圖片往往會(huì)有各種弊端。本篇文章將會(huì)闡述CSS3中陰影和反射的一系列使用方法。

CSS3陰影

在CSS3中，與陰影相關(guān)的具體屬性有text-shadow和box-shadow，分別表示文本陰影和容器陰影。

文本陰影

實(shí)際上，text-shadow并不是在CSS3中新增的的新屬性，在CSS2.0時(shí)就已經(jīng)有了這個(gè)屬性了，之后在CSS2.1不知何故被移除了，最終在CSS3中又重新收納了這個(gè)屬性。

語法，

text-shadow：none | <shadow> [ , <shadow> ]*

其中，<shadow> = <length>{2,3} && <color>?，即<shadow>可以設(shè)置為2個(gè)（或者3個(gè)）的長(zhǎng)度單位（只要是CSS中允許的長(zhǎng)度標(biāo)識(shí)單位皆可，比如px，em等）加上一個(gè)顏色值。其默認(rèn)值為none。下面是一個(gè)使用text-shadow的例子，

text-shadow: 1px 2px 2px #5678AF

其效果如下圖，

參數(shù)說明如下，

• 默認(rèn)值none，表示沒有陰影。
• 第一個(gè)長(zhǎng)度值用于設(shè)置文本陰影的水平偏移值，可以為負(fù)值。
• 第二個(gè)長(zhǎng)度值用于設(shè)置文本陰影的垂直偏移值，可以為負(fù)值。
• 第三個(gè)長(zhǎng)度值用于設(shè)置陰影的模糊半徑，不可為負(fù)值。此參數(shù)可省略。
• 顏色值用于標(biāo)識(shí)陰影的具體顏色。

容器陰影

box-shadow用于給容器設(shè)置陰影。其用法比text-shadow相比要復(fù)雜一點(diǎn)。其具體語法如下，

box-shadow：none | <shadow> [ , <shadow> ]*

其中，<shadow> = inset? && [ <length>{2,4} && <color>? ]，即<shadow>可設(shè)置：是否為內(nèi)陰影，2個(gè)~4個(gè)的長(zhǎng)度單位加上一個(gè)顏色值。下面是一個(gè)使用box-shadow的示例，

其效果如下圖，

參數(shù)說明如下，

• 默認(rèn)值none，表示沒有陰影。
• 第1個(gè)長(zhǎng)度值用來設(shè)置對(duì)象的陰影水平偏移值?？梢詾樨?fù)值。
• 第2個(gè)長(zhǎng)度值用來設(shè)置對(duì)象的陰影垂直偏移值?？梢詾樨?fù)值。
• 如果提供了第3個(gè)長(zhǎng)度值則用來設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值。
• 如果提供了第4個(gè)長(zhǎng)度值則用來設(shè)置對(duì)象的陰影外延值。
• inset用于設(shè)置對(duì)象的陰影類型為內(nèi)陰影。該值為空時(shí)，則對(duì)象的陰影類型為外陰影 。

這里對(duì)box-shadow的第四個(gè)長(zhǎng)度參數(shù)多叨嘮幾句。第四個(gè)長(zhǎng)度參數(shù)用于設(shè)置陰影的外延值。這個(gè)參數(shù)經(jīng)常被忽略，其實(shí)在有些場(chǎng)景下還是挺有用處的。此參數(shù)的默認(rèn)值為0，我們將此值賦值為陰影模糊半徑的負(fù)值來抵消模糊值，從而得到單邊陰影的效果。下面是一個(gè)例子，

.div1 {
    box-shadow: 0 8px 6px #565656;
}
.div2 {
    box-shadow: 0 8px 6px -6px #565656;
}

其效果如下，

左側(cè)的div1未設(shè)置陰影外延值，右側(cè)的div2設(shè)置了一個(gè)負(fù)的外延值，且數(shù)值與陰影模糊半徑一致。

多重陰影

無論是text-shadow還是box-shadow，都是支持多重陰影的。就是可以給text-shadow或者box-shadow屬性設(shè)置多組陰影值。如下，

.text-shadow {
    text-shadow: 1px 1px 5px gold, 5px 5px 2px pink, -2px -2px 6px green;
}
.box-shadow {
    box-shadow: 2px 4px 6px pink, -2px -4px 6px green;
}

其效果如下，

從效果圖中可以看出，我們可以利用多重陰影搭配不同的陰影顏色做出各種玄幻的效果。唯一限制你的就是你的想象力。????

兼容性

描述陰影的兩個(gè)CSS3屬性在現(xiàn)代瀏覽器上表現(xiàn)良好（需要帶上不同瀏覽器內(nèi)核的私有前綴），但是老舊的瀏覽器并不支持。

文本陰影text-shadow的兼容性如下圖，

需要注意的是，文本陰影IE系瀏覽器到IE10才支持，之前版本的IE瀏覽器中要實(shí)現(xiàn)陰影效果需要使用IE的相關(guān)私有實(shí)現(xiàn)（即IE濾鏡的用法，不過這里不準(zhǔn)備對(duì)其進(jìn)行描述，想要了解更多關(guān)于IE濾鏡的內(nèi)容請(qǐng)自行查閱相關(guān)資料）。

容器陰影box-shadow的兼容性如下圖，

CSS3反射

CSS3中對(duì)反射（或者說倒影）提供了支持。那么，什么是反射（或者說倒影）？讓我們先來看張效果圖。

CSS3中提供此效果的屬性叫做box-reflect，其語法如下，

box-reflect：none | <direction> <offset>? <mask-box-image>?

• none，為默認(rèn)值，表示無反射。
• <direction>，反射的方向，可選值為above，below，left，right。
• <offset>，表示本體和反射之間的間隔，可設(shè)置為長(zhǎng)度值也可設(shè)置為百分比。此參數(shù)可省略，默認(rèn)為0。
• <mask-box-image>，用于設(shè)置反射的遮罩，可設(shè)置為漸變或者一個(gè)圖片。此參數(shù)可省略。

上述效果對(duì)應(yīng)的css代碼如下，

.box-reflect {
    -webkit-box-reflect: below 20px -webkit-linear-gradient(top, transparent, rgba(255,255,255,.3));
    width: 560px;
    font-size: 4em;
    color: gold;
}

在應(yīng)用反射時(shí)，有一點(diǎn)需要注意一下，就是我們要為反射的方向（即<direction>參數(shù)的方向）預(yù)留足夠的空間，否則會(huì)導(dǎo)致頁面看起來無反應(yīng)，因?yàn)闆]有足夠的空間用來展示反射。

其瀏覽器兼容性如下圖，

CSS3反射可以很簡(jiǎn)單的解決之前必須使用圖片才能解決的倒影問題，不過由于一些瀏覽器的支持問題，使得這個(gè)屬性貌似使用的不是很廣泛。

這里有一篇w3cplus上介紹反射的文章使用CSS3制作倒影，我覺得挺基礎(chǔ)的，有興趣的可以參閱。

文章中所有的瀏覽器兼容性圖片資源均來自http://www.w3chtml.com。