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

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

box-shadow圖層陰影屬性和text-shadow文字陰影屬性在用法上差不多,都以X軸和Y軸座標系來控制陰影擴充,這裡我們就來詳解CSS3的圖層陰影和文字陰影製作效果使用:

box-shadow圖層陰影

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

瀏覽器安全色性：
不同的瀏覽器安全色性不同，mozilla核心的瀏覽器寫法如下（但新版本的Firefox瀏覽器已經不需要再添加）：
-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;    //以Firefox為代表的mozilla核心瀏覽器，Firefox現在的版本已經支援這個屬性，所以不用再加-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;    //以Firefox為代表的mozilla核心瀏覽器，Firefox現在的版本已經支援這個屬性，所以不用再加-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>

效果如下：

顯示效果如下：

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！