测试：CSS阴影文本

马黑黑

锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦

马黑黑

代码：

<div style="color:#ffffff;font-size:60px;font-family:宋体;text-shadow:4px 4px 8px #000000;">

锄禾日当午<br>
汗滴禾下土<br>
谁知盘中餐<br>
粒粒皆辛苦<br>

</div>

【说明】

text-shadow 是基于文本修饰的 css 样式属性，它接受如下几个参数：

① 水平阴影位置（必需）
② 垂直阴影位置（必需）
③ 模糊距离（可选）
④ 阴影的颜色（可选）

上面的 <div> 标签代码里，text-shadow属性的第一个参数和第二个参数都定义为 4px  即水平和垂直阴影都是四个像素，模糊距离为8个像素，阴影颜色为 #000000 即黑色。这样，即使是纯白色文本也能清晰可辨。当然，文本阴影意在修饰，追求的是美感，文本颜色及阴影颜色的设定应根据需要选择。

有意思的是，text-shadow 属性的阴影位置支持负值。若为负值，阴影效果是往左和往上的。

马黑黑

代码解释

红影

这个好玩，我来试试

红影

红影

再试试可选项如果不选会怎样

红影

红影

呀，变成带重影了，我把模糊距离拿掉就上面那样了

红影

跟着黑黑，每天都能学到新东西，真好

马黑黑

红影 发表于 2021-12-17 20:37
跟着黑黑，每天都能学到新东西，真好

也不是每天了，偶尔

马黑黑

红影 发表于 2021-12-17 20:36
呀，变成带重影了，我把模糊距离拿掉就上面那样了

模糊参数虽可选，但有没有效果是不一样的

小辣椒

这个太好了，字体颜色会很清晰了

小辣椒

黑黑，小辣椒明天做一个播放器试试

小辣椒

黑黑好厉害
小辣椒学习

小辣椒

这个字体相差好多

小辣椒

黑黑好厉害
小辣椒学习

红影

马黑黑 发表于 2021-12-17 20:52
也不是每天了，偶尔

当天的是学习的，剩下的时间是重影一样复习的时间，这样摊下来不就是每天么

红影

马黑黑 发表于 2021-12-17 20:53
模糊参数虽可选，但有没有效果是不一样的

嗯嗯，完全不一样，看样子这个参数省不了的。

绿叶清舟

带个板凳来学习

加林森

明天来学习！

马黑黑

加林森 发表于 2021-12-17 23:18
明天来学习！

早上好

马黑黑

红影 发表于 2021-12-17 22:04
嗯嗯，完全不一样，看样子这个参数省不了的。

它是可选可不选，但确实有和没有有效果上的区别。这好理解：阴影理论上是颜色渐弱的，模糊达到的效果接近此诉求