文字內部陰影該怎麼實現?

Question

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

Answer 1

關鍵點就是，用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;
}