純CSS文本陰影效果實(shí)現(xiàn)

2020-03-24 17:08:25

字體：大中小

供稿：網(wǎng)友

CSS2中的text-shadow屬性能夠很容易的給web頁(yè)面中的文本添加陰影，但是到目前為止只有OSX的Safari瀏覽器支持它，今天，我們將為其他瀏覽器創(chuàng)建CSS文本陰影效果，包括Firefox。討論了多年的text-shadow屬性可以讓你控制頁(yè)面元素陰影的顏色、偏移量及模糊度，盡管其還未被廣泛支持，但是某些設(shè)計(jì)師已經(jīng)開(kāi)始決定在任意地方使用CSStext-shadows屬性了。盡管這只是為很少數(shù)量的用戶(hù)增強(qiáng)性設(shè)計(jì)。 CSSText-ShadowsSafari實(shí)現(xiàn) 如果你使用的是Safari，你將可以看到在白色的背景上有陰影的白色文本：Thisiswhitetext,onawhitebackground.YetinSafari,youcanreadthis,becauseoftheblacktext-shadow. 如果你不是使用Safari，一下是效果圖：
瀏覽器通用CSS文本陰影 Firefox是個(gè)偉大的瀏覽器，但是它不支持以上的效果，所以我決定用CSS實(shí)現(xiàn)一個(gè)類(lèi)似的效果，雖然沒(méi)有前面你看到的text-shadow屬性效果完美，但是該方法適用于更大范圍的瀏覽器，包括Safari。 cThisiswhitetext,onawhitebackground.YetwithCSSDropShadows,youcanreadthis,becauseoftheblacktext-shadow. HTML代碼要添加陰影效果，我們?cè)谖覀兊睦佣温渲袆?chuàng)建了個(gè)title屬性?xún)?nèi)容是需要投影的文本的內(nèi)容一致。因?yàn)樵谠摲椒ㄖ形覀冎貜?fù)了文本，所以該方法更適合在標(biāo)題或文本比較短的段落中，而不適合整個(gè)頁(yè)面的陰影效果。 p title="Thisiswhitetext,onawhitebackground.YetwithCSSDropShadows,youcanreadthis,becauseoftheblacktext-shadow." span Thisiswhitetext,onawhitebackground.YetwithCSSDropShadows,youcanreadthis,becauseoftheblacktext-shadow. /span /p 我們?cè)诙温渲性鰪?qiáng)了個(gè) span 標(biāo)簽用來(lái)控制正常的文本的位置以將其與生成的陰影區(qū)分開(kāi)。 TheCSS CSS:before虛擬元素用來(lái)從段落的title屬性中生成陰影，而絕對(duì)(absolute)定位用來(lái)將正常文本放置于陰影文本之上。 .shadow{position:relative;display:block;color:#fff;}
.shadowspan{position:absolute;display:block;top:0px;}
.shadow: before{display:block;padding:1px;content:attr(title);color:#666;}你可以使用position:absolute控制在相對(duì)定位（position:relative）的元素內(nèi)部的元素的位置。該技能使得我們可以控制正常文本和陰影文本的放置，而又可以在原來(lái)的文本流程中使用該元素。你可以在.shadow中控制文本及陰影的背景顏色、字體等屬性，而可以在.shadow:before中使用padding屬性控制陰影的偏移值，使用color設(shè)置陰影的顏色等。本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS3圓環(huán)動(dòng)態(tài)彈出菜單

下一篇：CSS盒子模式詳解一