這篇文章給大家分享的是有關(guān)CSS3中如何實現(xiàn)圖層陰影和文字陰影效果的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司專注于陳倉網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供陳倉營銷型網(wǎng)站建設(shè),陳倉網(wǎng)站制作、陳倉網(wǎng)頁設(shè)計、陳倉網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù),打造陳倉網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供陳倉網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
box-shadow圖層陰影
box-shadow:陰影類型 X水平偏移(可取正負值) Y垂直偏移(可取正負值) 陰影大小 陰影擴展 陰影顏色值
陰影類型可以省略,默認為外投影,當它的值為inset時,為內(nèi)陰影效果。
X水平偏移和Y垂直偏移可取正負值,當X為負值是投影在左邊,為正時投影在右邊。當Y為負值時投影在上面,為正時投影在下面。
陰影大小和擴展與ps里面的原理一樣。
瀏覽器兼容性:
不同的瀏覽器兼容性不同,mozilla內(nèi)核的瀏覽器寫法如下(但新版本的火狐瀏覽器已經(jīng)不需要再添加):
-moz-box-shadow:陰影類型 X水平偏移(可取正負值) Y垂直偏移(可取正負值) 陰影大小 陰影擴展 陰影顏色值
webkit內(nèi)核的瀏覽器寫法如下:
-webkit-box-shadow:陰影類型 X水平偏移(可取正負值) Y垂直偏移(可取正負值) 陰影大小 陰影擴展 陰影顏色值
實例一:
效果圖:
把box-shadow投影類型改為inset,效果圖:
實例二:
效果圖:
text-shadow文字陰影
上面我們討論了關(guān)于css3圖層陰影 box-shadow來實現(xiàn)圖層陰影的效果,今天我們來共同學(xué)習一下如何實現(xiàn)文字陰影的效果,將用到css3的另外一個屬性text-shadow,這兩個效果分別增強了圖層和文字的質(zhì)感,創(chuàng)建立體效果。
語法:
text-shadow : none |none | [ , ] * 或none | [, ]*
text-shadow:X軸上的位移(正負皆可),Y軸上的位移(正負皆可),陰影的寬度,陰影的顏色值
說明:
和圖層陰影相似,它也可以對同一對象應(yīng)用一組或多組陰影效果,用逗號隔開。X軸偏移可以為正負,當X為正時向右偏移,為負時向左偏移。Y軸偏移可以為正負,當X為正時向下偏移,為負時向上偏移。陰影的顏色值可以是#xxx,也可以是rgb,還可以是rgba透明色。
實例:text-shadow
雨打浮萍
顯示效果如下:
對比box-shadow
專注于web前端開發(fā) 效果如下:
顯示效果如下:
感謝各位的閱讀!關(guān)于“CSS3中如何實現(xiàn)圖層陰影和文字陰影效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!