問(wèn)題描述

文本陰影可以用text-shadow實(shí)現(xiàn)?那么文字內(nèi)部陰影的顯示該怎么實(shí)現(xiàn)呢？

問(wèn)題解答

關(guān)鍵點(diǎn)就是，用RGBA透明色模擬字體內(nèi)陰影效果。

body{background:#fff;}.inset-text{font-family:Helvetica,Arial,sans-serif;font-weight:bold;font-size:5em;color:rgba(0,102,204,0.7);text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;}

原理很簡(jiǎn)單，text-shadow 始終處于字體之下，所以用 text-shadow 的多重陰影先在字體實(shí)色之下模擬出內(nèi)嵌陰影的效果，然后，通過(guò)將字體的透明度降低，達(dá)到字體內(nèi)陰影的模擬效果。當(dāng)然這種模擬是有局限的，比如，背景色和模擬陰影必須相同，不然就穿幫了，呵呵。其次，在不支持RGBA的瀏覽器里，不能發(fā)揮作用，而且還必須在RGBA之上添加默認(rèn)顏色以保證老瀏覽能至少顯示實(shí)色：

.inset-text{font-family:Helvetica,Arial,sans-serif;font-weight:bold;font-size:5em;color:#09f;color:rgba(0,102,204,0.7);text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;}

最后，如果你選中上面那段示例的文本，可以看到很明顯的模糊。這在之前也以及提到過(guò)，因?yàn)槎嘀仃幱暗淖饔迷谶x中時(shí)依然有效，所以為了文本的可讀性，應(yīng)該將選中時(shí)的文本陰影去掉。

::-moz-selection{text-shadow:none;}::selection{text-shadow:none;}