詳解CSS3的圖層陰影和文字陰影效果使用

rainleaves 發(fā)布時(shí)間：2016-06-09 11:11:27 作者：雨打浮萍

box-shadow圖層陰影屬性和text-shadow文字陰影屬性在用法上差不多,都以X軸和Y軸坐標(biāo)系來控制陰影擴(kuò)展,這里我們就來詳解CSS3的圖層陰影和文字陰影效果使用:

box-shadow圖層陰影

box-shadow:陰影類型 X水平偏移(可取正負(fù)值) Y垂直偏移(可取正負(fù)值) 陰影大小陰影擴(kuò)展陰影顏色值
陰影類型可以省略，默認(rèn)為外投影，當(dāng)它的值為inset時(shí)，為內(nèi)陰影效果。
X水平偏移和Y垂直偏移可取正負(fù)值，當(dāng)X為負(fù)值是投影在左邊，為正時(shí)投影在右邊。當(dāng)Y為負(fù)值時(shí)投影在上面，為正時(shí)投影在下面。
陰影大小和擴(kuò)展與ps里面的原理一樣。

瀏覽器兼容性：
不同的瀏覽器兼容性不同，mozilla內(nèi)核的瀏覽器寫法如下（但新版本的火狐瀏覽器已經(jīng)不需要再添加）：
-moz-box-shadow:陰影類型 X水平偏移(可取正負(fù)值) Y垂直偏移(可取正負(fù)值) 陰影大小陰影擴(kuò)展陰影顏色值
webkit內(nèi)核的瀏覽器寫法如下：
-webkit-box-shadow:陰影類型 X水平偏移(可取正負(fù)值) Y垂直偏移(可取正負(fù)值) 陰影大小陰影擴(kuò)展陰影顏色值

實(shí)例一：

CSS Code復(fù)制內(nèi)容到剪貼板

<div class="shadow"></div>
.shadow{
width:200px;
height:50px;
box-shadow:3px 3px 3px 3px #000;
/*-moz-box-shadow:3px 3px 3px 3px #000; //以火狐為代表的mozilla內(nèi)核瀏覽器，火狐現(xiàn)在的版本已經(jīng)支持這個(gè)屬性，所以不用再加-moz*/
-webkit-box-shadow:3px 3px 3px 3px #000;
}

效果圖：
201669111325178.jpg (221×71)

把box-shadow投影類型改為inset，效果圖：
201669111350004.jpg (210×57)

實(shí)例二：

CSS Code復(fù)制內(nèi)容到剪貼板

<div class="shadow"></div>
.shadow{
width:200px;
height:50px;
box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;
/*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue; //以火狐為代表的mozilla內(nèi)核瀏覽器，火狐現(xiàn)在的版本已經(jīng)支持這個(gè)屬性，所以不用再加-moz*/
-webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;
}

效果圖：
201669111427729.jpg (227×78)

text-shadow文字陰影

上面我們討論了關(guān)于css3圖層陰影 box-shadow來實(shí)現(xiàn)圖層陰影的效果，今天我們來共同學(xué)習(xí)一下如何實(shí)現(xiàn)文字陰影的效果，將用到css3的另外一個(gè)屬性text-shadow，這兩個(gè)效果分別增強(qiáng)了圖層和文字的質(zhì)感，創(chuàng)建立體效果。

語法：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

text-shadow:X軸上的位移(正負(fù)皆可),Y軸上的位移(正負(fù)皆可),陰影的寬度,陰影的顏色值

說明：
和圖層陰影相似，它也可以對同一對象應(yīng)用一組或多組陰影效果，用逗號隔開。X軸偏移可以為正負(fù)，當(dāng)X為正時(shí)向右偏移，為負(fù)時(shí)向左偏移。Y軸偏移可以為正負(fù)，當(dāng)X為正時(shí)向下偏移，為負(fù)時(shí)向上偏移。陰影的顏色值可以是#xxx，也可以是rgb，還可以是rgba透明色。

實(shí)例：text-shadow

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>

顯示效果如下：
201669111554919.png (148×75)

對比box-shadow

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<h2 style="font-family:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align:center; box-shadow:2px 2px 5px #f60;">專注于web前端開發(fā)</h2>

效果如下：
201669111614038.png (250×69)