css3系列之text-shadow 浮雕效果,鏤空效果,熒光效果,遮罩效果


text-shadow

其實這東西,跟  box-shadow 差不多,沒啥好說的不懂的話,點這里→  css3系列之詳解box-shadow  。

它只有 四個參數

  x(第一個值設置x位置)  y(第二個值設置y位置)  blur(第三個值,設置陰影模糊程度)  color(第四個值,設置陰影顏色)

它跟 box-shadow 的差別就是,沒有 外陰影和 內陰影之分。 text-shadow 只有外陰影,也就是 文字下面的陰影。

本章呢,來利用他實現幾個 小應用:

  浮雕效果:凸出來

 

  鏤空效果:凹進去

  

  熒光效果:發光的字體

 

  遮罩效果:

-webkit-background-clip:text      設置背景圖片從 字體 里面展示

-text-fill-color:transparent                設置字體變成透明。

這兩個屬性,只有在 webkit 內核的瀏覽器才有。所以其他瀏覽器,是不支持的。

 

如果把-webkit-background-clip:text  和  text-shadow 結合起來用, 會出現一個bug。 什么bug呢, 看看下面的例子。

這是為啥呢, 因為,文字變透明了,而且clip:text這個屬性,把文字變成了背景圖片的一部分了。所以陰影,出現的位置只能是在文字的上面。 所以陰影蓋住了 文字。 所以看不見遮罩效果。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM