文本內部陰影該怎么實現?
問題描述
文本陰影可以用text-shadow實現?那么文字內部陰影的顯示該怎么實現呢?
問題解答
回答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;}
相關文章:
1. docker - 如何修改運行中容器的配置2. javascript - Web微信聊天輸入框解決方案3. 請教各位大佬,瀏覽器點 提交實例為什么沒有反應4. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?5. javascript - 為什么form表單提交沒有跨域問題,但ajax提交有跨域問題?6. javascript - Ajax加載Json時,移動端頁面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?7. javascript - history.replaceState()無法改變query參數8. javascript - 移動端textarea不能上下滑動,該怎么解決?9. javascript - 關于audio標簽暫停的問題10. javascript - 音頻加載問題
