文本內部陰影該怎么實現?

問題描述

文本陰影可以用text-shadow實現?那么文字內部陰影的顯示該怎么實現呢？

問題解答

關鍵點就是，用RGBA透明色模擬字體內陰影效果。

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;}

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

.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;}

最后，如果你選中上面那段示例的文本，可以看到很明顯的模糊。這在之前也以及提到過，因為多重陰影的作用在選中時依然有效，所以為了文本的可讀性，應該將選中時的文本陰影去掉。

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