這篇文章主要介紹了關於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的圖層陰影和文字陰影的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
