Chrome文本阴影在设置为0时仍然显示。

Question

所以，我正在构建一个网站设计器，我遇到了一些奇怪的问题。如果在元素上设置 text-shadow: 0 0 0 someColor，那么阴影实际上会被应用。我已经制作了一个非常清晰的示例，可以在这里看到 FIDDLE。

这是一个错误吗？

- iConnor

---

@minitech 哦，好的，那就这样吧。这很奇怪 O_o - tckmn

我认为这可能是普通渲染文本和文字阴影反锯齿处理之间存在的不一致性导致的。（它可能没有在阴影上花费太多“精力”之类的原因。） - Ry-

@minitech 我更愿意说，这是因为如果你在彼此之上渲染两个半透明的对象（例如半填充像素），那么两者都是可见的。 - John Dvorak

@minitech 理想情况下，渲染应该在抗锯齿后使用光线追踪而不是阿尔法合成，但出于性能原因，我无法想象实际情况下会这样做 - 但我可以想象一个近似值（取决于您要存储多少数据与像素）。 - John Dvorak

那么为什么要设置这些值呢？如果你不想要阴影，就设置 text-shadow: none;，否则你会得到一个偏移量为 (0,0)，模糊度为 0 的阴影，这与 0 扩展不同。 - omma2289

Answer 1

“这不是一个bug，因为它并没有错误地实现规范；规范暗示只要计算值不是“none”，就会生成阴影。唯一可能计算到“none”的值是“none”或“initial”。”

文本阴影的绘制方式与盒子阴影类似。因此，大部分文本阴影的行为都遵循盒子阴影的规范。在任何一个规范中都没有说明所有零值应该不生成阴影。它只是说每个属性可以采用两种可能的值：none或由一个或多个<shadow>值组成的逗号分隔列表，每个值组对应一组值：在text-shadow的情况下，它是给定于自身规范中的[ <length>{2,3} && <color>? ]#。只要你有一个不是none的值，任何一个规范都会假设会绘制阴影，并根据这个假设指定所有行为。

对于这两个属性，即使您没有指定颜色，两个规范都指出应该使用currentColor（它在文本中说是“从color属性中获取”或“它阴影的油墨的结果颜色”；在代码中的结果是currentColor）。由于阴影总是绘制为非none值，而零长度的阴影与文本完全相同大小，因此这里发生的情况可能是由于字形和阴影抗锯齿（如注释所述）而合成了两个或多个半透明像素层。这不仅适用于文本阴影，还适用于盒子阴影，一个典型的例子是带圆角的框, 在那里只有圆角本身有抗锯齿的迹象，而框的直边则没有。这在所有浏览器中都会发生，至少基于测试和以往经验。

如果您绝对不能接受 none 作为值，您可以始终指定颜色为 transparent。 阴影仍将被绘制，但由于它完全透明，您将看不到它。

- BoltClock

Answer 2

如果您想要删除文本阴影，我建议将 text-shadow 设置为 none;

text-shadow:none;

- shadowfox

---

我知道如何解决这个问题，例如使用 text-shadow: none;，但问题不在于此，问题是当元素上没有设置模糊时，它本来不应该发生这种情况。 - iConnor

Answer 3

可选项。这是一个值。如果未指定，则默认为0。该值越高，模糊度越大；阴影变得更宽、更浅。

当设置为零时，模糊属性并不表示没有模糊效果。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

- Captain Giraffe

---

当设置为零时，模糊属性确实表示“无模糊”，如果我可以将“锐利”解释为“无模糊”。http://www.w3.org/TR/css3-background/#the-box-shadow - Ry-

@minitech，它并没有表明“无阴影”。 - John Dvorak

@JanDvorak说：“我从未声称它能够。我在驳斥这个答案声称‘模糊属性设置为零时不表示没有模糊’的说法，因为很明显它确实如此。” - Ry-

所以，我们得出的结论是它并没有明确表示0=无模糊，但实际上你可能认为是这样的，对吧？ - iConnor

@Pinocchio 0 表示没有模糊（理想情况下），绝对不是没有阴影。 - John Dvorak

Answer 4

text-shadow: 0px 0px 0px #FFFFFF; 这些属性不是用来隐藏或显示的。将阴影上下移动，将阴影左右移动和模糊级别为0是清晰的。

如果您想隐藏阴影，则：写入"text-shadow:;"但不要设置任何值，它应该为空。

对于糟糕的英语感到抱歉 :)

- TeknolojiGezgini

Answer 5

如果你正在构建一个页面生成器，并且想要初始的“空”值（虽然它们并不是真正的空，第一和第二个零表示定位，最后一个零表示模糊程度），你可以将颜色设置为元素背景颜色的默认值。或者，你可以将模糊值更改为-1。

text-shadow: 0 0 -1px red;

我能想到的另一个选项是让他们启用text-shadow，然后使用if else语句输入你的0 0 0红色。 伪代码：

if text-shadow option is checked
    use text-shadow:0 0 0 red;

else
    use text-shadow:none;

祝你好运。

- Akexis

---

我知道如何解决这个问题，例如使用text-shadow: none;，但问题并不在此，问题是当元素上没有设置模糊时，它不应该出现这种情况。 - iConnor