真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS3中如何實現(xiàn)圖層陰影和文字陰影效果

這篇文章給大家分享的是有關(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垂直偏移(可取正負值) 陰影大小 陰影擴展 陰影顏色值

實例一:

    .shadow{     width:200px;     height:50px;     box-shadow:3px 3px 3px 3px #000;     /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐為代表的mozilla內(nèi)核瀏覽器,火狐現(xiàn)在的版本已經(jīng)支持這個屬性,所以不用再加-moz*/    -webkit-box-shadow:3px 3px 3px 3px #000;    }

效果圖:
CSS3中如何實現(xiàn)圖層陰影和文字陰影效果

把box-shadow投影類型改為inset,效果圖:
CSS3中如何實現(xiàn)圖層陰影和文字陰影效果

實例二:

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

效果圖:
CSS3中如何實現(xiàn)圖層陰影和文字陰影效果

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

 雨打浮萍

顯示效果如下:
CSS3中如何實現(xiàn)圖層陰影和文字陰影效果

對比box-shadow

專注于web前端開發(fā)  效果如下:

CSS3中如何實現(xiàn)圖層陰影和文字陰影效果

顯示效果如下:
CSS3中如何實現(xiàn)圖層陰影和文字陰影效果

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


當前題目:CSS3中如何實現(xiàn)圖層陰影和文字陰影效果
文章起源:http://weahome.cn/article/podess.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部