1. 文字阴影(text-shadow): 为文本添加阴影效果。
text-shadow: 2px 2px 4px #000000;
这个例子表示在文字右下方添加一个2px的阴影,颜色为黑色。
2. 文字渐变(background-clip + text-fill-color): 为文本添加渐变效果。
background: linear-gradient(to right, #ff0000, #0000ff);
-webkit-background-clip: text;
color: transparent;
这个例子使用背景渐变并通过 background-clip 将渐变应用到文字上,color: transparent; 使得文字本身变为透明,从而显示出渐变效果。
3. 文字描边(-webkit-text-stroke): 为文本添加描边效果。
-webkit-text-stroke: 2px black;
这个例子表示为文字添加2px宽度的黑色描边。
4. 文字变形(text-transform): 控制文本的大小写。
text-transform: uppercase;
这个例子表示将文本转换为大写。
5. 文字间距(letter-spacing): 调整字符之间的间距。
letter-spacing: 2px;
这个例子表示增加字符之间的间距为2px。
6. 文字描边(text-stroke): 为文字添加描边效果。
-webkit-text-stroke: 1px #000;
这个例子表示为文字添加1px宽度的黑色描边。
7. 文字渐变背景(background-clip + linear-gradient): 为文本创建渐变背景。
background: linear-gradient(to right, #ff0000, #0000ff);
-webkit-background-clip: text;
color: transparent;
这个例子类似于上面的渐变效果,但是通过 background-clip 将渐变应用到文字上。
8. 文字浮动阴影(float-shadow): 为文本添加浮动的阴影效果。
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
这个例子表示在文字右下方添加一个浮动的阴影。
这些效果可以单独使用,也可以组合在一起,以实现各种独特的文本样式。通过巧妙地运用这些属性,你可以为文本添加更多的视觉吸引力和个性化效果。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12562/CSS