CSS3的圖層陰影和文字陰影的使用

這篇文章主要介紹了關於CSS3的圖層陰影和文字陰影的使用，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

box-shadow圖層陰影屬性和text-shadow文字陰影屬性在用法上差不多,都以X軸和Y軸坐標系來控制陰影擴展,這裡我們就來詳解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垂直偏移(可取正負值) 陰影大小陰影擴展陰影顏色值

實例一：

<p class="shadow"></p>   
.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，效果圖：

實例二：

<p class="shadow"></p>   
.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

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

顯示效果如下：

比較box-shadow

<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前端开发</h2>

效果如下：

顯示效果如下：

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

對於css中使用rgba和opacity設定透明度的區別分析

如何用css3實作多個元素依序顯示

使用css如何讓背景圖片伸展填滿避免重複顯示

以上是CSS3的圖層陰影和文字陰影的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！