|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因為文本中包含了所謂“超級鏈接”點。 陰影效果是一個常見也很實用的效果,相信有些朋友在使用陰影效果來美觀網(wǎng)頁頁面時,有時會有一些疑問,比如:字體文字陰影是怎樣設(shè)置的等等。那么本章就給大家談?wù)刢ss3是如何設(shè)置字體文字陰影的。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。其實在css3中有一個很實用的屬性可以給字體文字添加陰影效果,那就是css3 text-shadow屬性。 那么,我們先來詳細的看一看text-shadow屬性: text-shadow是CSS樣式屬性單詞,是設(shè)置對象中文本的文字字體是否有陰影及模糊效果的CSS樣式。 text-shadow屬性:在CSS3中可以用text-shadow屬性給頁面上的文字添加陰影效果, 可以通過對text-shadow屬性設(shè)置相關(guān)的屬性值,來實現(xiàn)一些需要的字體陰影效果,減少了圖片的使用。 text-shadow屬性的語法: text-shadow: h-shadow v-shadow blur color; 可以看出text-shadow屬性可以設(shè)置4個參數(shù),每個參數(shù)用空格隔開,下面我們來介紹一下這四個參數(shù): h-shadow: 設(shè)置水平陰影的位置(x軸方向),必需要設(shè)置的參數(shù);允許負值。 注釋:text-shadow 屬性可以向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表,每個陰影有兩個或三個長度值和一個可選的顏色值進行規(guī)定。省略的長度是 0。 下面我們來看一個css3設(shè)置字體文字陰影的小例子,來具體的感知一下text-shadow屬性的用法: <h1>我是一段測試文字</h1> h1{
color:powderblue; /*設(shè)置文字顏色*/
text-shadow: 2px 3px 1px pink;/*添加字體文字的陰影*/
}效果圖:
我們再來看看如果不設(shè)置css3文字陰影效果會是怎樣的:
說明: 1、陰影的水平偏移量(h-shadow):可以取正值也可以取負值,如果值為正值,則陰影在對象的右邊,反之其值為負值時,陰影在對象的左邊。 2、陰影的垂直偏移量(v-shadow ):可以取正值也可以取負值,如果為正值,陰影在對象的底部,反之其值為負值時,陰影在對象的頂部。 3、陰影的模糊半徑:只能設(shè)置為正值。如果值越大,陰影越模糊,反之陰影越清晰。如果其值為0時,表示陰影不具有模糊效果。 4、陰影的顏色:當(dāng)沒有指定顏色值的時候,瀏覽器會取默認色,但各瀏覽器默認色不一樣,特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無色,也就是透明,建議不要省略此參數(shù)。 說到瀏覽器的默認色不一樣,我們來看看text-shadow屬性在各個瀏覽器中是否支持: 瀏覽器的支持:
所有主流瀏覽器都支持 text-shadow 屬性。 注:Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。 以上就是css3如何添加文字陰影效果?text-shadow設(shè)置文字陰影效果的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!