在前端页面中,当文字内容处于复杂背景(如视频画面、图片区域)之上时,白色字体很容易与背景混合导致不清晰。此时,给文字添加 黑色描边(Outline) 是最有效的增强可读性的方法。
javascript
text-shadow:
2px 0 #000,
-2px 0 #000,
0 2px #000,
0 -2px #000,
2px 2px #000,
-2px -2px #000,
2px -2px #000,
-2px 2px #000;
这 8 个阴影分别对应:
上、下、左、右 4 个方向
左上、右上、左下、右下 4 个角方向
实现效果如下:
描边厚度:由偏移量(如 2px)决定
描边颜色:纯黑
#000或半透明黑无模糊:确保边缘硬朗,不会糊成光晕