css - CSS属性文本阴影模糊的最大值

Question

我只是想知道'text-shadow'中CSS属性模糊的最大值是多少？

随着价值不断增加，很难看到任何变化，因为事情开始变得模糊。

text-shadow:0 0 0px #000;

text-shadow:0 0 10px #000;

text-shadow:0 0 50px #000;

text-shadow:0 0 100px #000;

text-shadow:0 0 200px #000;

text-shadow:0 0 300px #000;

text-shadow:0 0 400px #000;

300px 和 400px 看起来几乎一样。随着我们不断增加，我看不出有什么不同。可能有几个像素正在消失/移开，很难注意到。我相信每个浏览器都会有所不同。

有点无益的问题，但我相信我们至少可以增加对此的了解。

Answer 1

_{免责声明：我希望我能正确地用英文表达。请随时更正此答案。}

这就是模糊的定义方式：7.2。投影：'box-shadow' 属性

第三个长度是模糊半径。不允许使用负值。如果模糊值为零，则阴影的边缘很锐利。否则，值越大，阴影边缘越模糊。

非零模糊距离表示生成的阴影应该被模糊，例如通过高斯滤波器。没有定义确切的算法；但是，生成的阴影必须接近（每个像素在其预期值的 5% 以内）通过对阴影应用标准偏差等于模糊半径一半的高斯模糊来生成的图像。

因此，您会看到模糊半径用于具有定义标准偏差的高斯滤波器。

看看这张图片：

_{来自维基百科“Gauß-Filter”（上面的德语、英语链接）}

您会看到，值越大，边缘就越平滑，但它不会以不同的方式分布其他值。

Answer 2

模糊没有所谓的最大值，您只是将半径设置得太高，这只会使效果无用，请将其设置为最小。

所以你设置的半径越多blur，text-shadow得到的越多，让我用一个图像来说明这一点，我们有一个字体，我们已经设置了大小12px和半径100px，这里的模糊效果可以忽略不计..

在上图中，字体位于中心，阴影跨越大面积（黑色边框），因此text-shadow当您将blur值设置得太高时会降低效果。

但是，如果您按比例设置它，它将按您的预期显示

演示1（第二个可以忽略不计p）

演示 2（使其成比例）