text-shadow（blur-radius）的第三个参数有什么作用？答案

【问题标题】：What does the third parameter of text-shadow (blur-radius) do?text-shadow（blur-radius）的第三个参数有什么作用？
【发布时间】：2020-09-05 15:00:30
【问题描述】：

正如标题所说，blur-radius 有什么作用？

根据CSS-Tricks

第三个值，模糊半径，是一个可选值，可以指定但不必指定。文本被拉伸的像素数量会导致模糊效果。如果您不使用第三个值，则会将其视为您指定的模糊半径为零。

“文本被拉伸的像素数量”是什么意思？

如果我在元素上设置这样的文本阴影

text-shadow: 0px 0px red;

阴影将不可见。

但是如果我设置一个更大的模糊半径，像这样

text-shadow: 0px 0px 2px red;

阴影将变得可见。

我想了解为什么会这样。

是的，模糊变得更大，因为模糊半径具有更高的值 - 但它是如何工作的？ “2px”的值将意味着模糊将传播到 2px？ 如果blur-radius设置为0，是否意味着文字的阴影和字母一样大？

谁能向我解释一下这个“模糊半径”是如何工作的？

【问题讨论】：

你的答案在这里@john Smith css-tricks.com/almanac/properties/b/box-shadow/…。

标签： css

【解决方案1】：

那么，看box-shadow的例子：

.box {
  float: left;
  padding: 2em;
  margin: 2em;
  background: #f5f5f5
}

/* Move shadow a bit */
.box-1 { box-shadow: 0 20px 0 #ddd }
.box-2 { box-shadow: 0 20px 10px #ddd }
.box-3 { box-shadow: 0 20px 20px #ddd }
.box-4 { box-shadow: 0 20px 50px #ddd }

<div class="box box-1">0px</div>
<div class="box box-2">10px</div>
<div class="box box-3">20px</div>
<div class="box box-4">50px</div>

text-shadow blur 也是如此 - 但阴影是文本形式。

您可以看到，如果将模糊半径设置为0，阴影与元素的大小相同。正因为如此，这种情况下的阴影是不可见的。

text-shadow 的示例：

.box {
  float: left;
  padding: 2em;
  margin: 2em;
}

/* Move shadow a bit */
.box-1 { text-shadow: 0 20px 0 red }
.box-2 { text-shadow: 0 20px 10px red }
.box-3 { text-shadow: 0 20px 20px red }
.box-4 { text-shadow: 0 20px 50px red }

<div class="box box-1">0px</div>
<div class="box box-2">10px</div>
<div class="box box-3">20px</div>
<div class="box box-4">50px</div>

【讨论】：

【解决方案2】：

因为阴影就在元素下方，并且您没有提供任何轴距。好吧，让我简化一下。

text-shadow: 2px 1px red;

这里的 2px 基本上是指在 x 轴上移动阴影 2px。另一方面，1px 只是说在 y 轴上移动阴影 1px。因此，如果您将它们分配为 0px，它将根本不会移动到任何地方，并且将位于元素下方。而 blur 是为了模糊阴影 . 我建议您查看文档以了解 CSS 属性。 W3school 最好参考这里 https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

【讨论】：

感谢您的回答。 “它根本不会移动到任何地方，并且会在元素下方”为我解决了这个问题。

【解决方案3】：

您可以使用第一个和第二个参数控制模糊。例如，您可以浏览下面的图片

Text Image

【讨论】：