text-shadow
是 CSS 中的一个属性,用于为文本添加阴影效果。它可以增强文本的视觉层次感,使其更具立体感或突出显示。
MDN: developer.mozilla.org/en-US/docs/...
!!!这个浅浅的浅浅的背景效果我觉得你没有理由拒绝
css
text-shadow: 0px 0px 1em rgb(255, 255, 255);
语法
css
text-shadow: h-shadow v-shadow blur-radius color;
- h-shadow:水平阴影的偏移量(必需)。正值向右,负值向左。
- v-shadow:垂直阴影的偏移量(必需)。正值向下,负值向上。
- blur-radius:阴影的模糊半径(可选)。值越大,阴影越模糊;默认值为 0,表示无模糊。
- color:阴影的颜色(可选)。默认值与文本颜色相同。
示例
-
基本阴影:
csstext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
效果:文本右下方有黑色阴影,模糊半径为 4px,透明度为 0.5。
-
多重阴影:
csstext-shadow: 1px 1px 2px red, -1px -1px 2px blue;
效果:文本同时有红色和蓝色阴影,分别位于右下方和左上方。
-
无模糊阴影:
csstext-shadow: 3px 3px 0 #000;
效果:文本右下方有清晰的黑色阴影,无模糊效果。
作用
- 增强可读性:在复杂背景下,阴影可使文本更易读。
- 视觉效果:为文本增加立体感或装饰效果。
- 突出显示:通过阴影使特定文本更醒目。
注意事项
- 阴影效果可能影响性能,尤其在大量使用或复杂动画时。
- 不同浏览器对
text-shadow
的支持可能略有差异,但现代浏览器普遍支持良好。
总结:text-shadow
是一种简单但强大的工具,能显著提升文本的视觉效果。