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這個屬性,把文字變成了背景圖片的一部分了。所以陰影,出現的位置只能是在文字的上面。 所以陰影蓋住了 文字。 所以看不見遮罩效果。