CSS3中如何實現圖層陰影和文字陰影效果

這篇文章給大家分享的是有關CSS3中如何實現圖層陰影和文字陰影效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

box-shadow圖層陰影

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

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

實例一：

<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內核瀏覽器，火狐現在的版本已經支持這個屬性，所以不用再加-moz*/  
 -webkit-box-shadow:3px 3px 3px 3px #000;   
}

效果圖：

把box-shadow投影類型改為inset，效果圖：

實例二：

<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內核瀏覽器，火狐現在的版本已經支持這個屬性，所以不用再加-moz*/  
 -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
}

效果圖：

text-shadow文字陰影

上面我們討論了關于css3圖層陰影 box-shadow來實現圖層陰影的效果，今天我們來共同學習一下如何實現文字陰影的效果，將用到css3的另外一個屬性text-shadow，這兩個效果分別增強了圖層和文字的質感，創建立體效果。

語法：

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

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

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

實例：text-shadow

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

顯示效果如下：

對比box-shadow

<h3 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前端開發</h3>  效果如下：

顯示效果如下：

感謝各位的閱讀！關于“CSS3中如何實現圖層陰影和文字陰影效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！