设置为0时显示的Chrome文字阴影 [英] Chrome text shadow showing when set to 0

问题描述

因此，我正在构建网站设计器，并且遇到了一些奇怪的事情，如果将text-shadow: 0 0 0 someColor设置在实际上已应用阴影的元素上，则我已经做了一个很简单的小提琴此处 FIDDLE .

这是一个错误吗?

解决方案

这不是错误，因为它不是规范的错误实现；该规范暗示只要计算值不是none，就会生成阴影.可以计算为none的 only 值为none或initial.

文本阴影的绘制类似于框阴影.因此，大多数文本阴影行为都遵循 box的规范阴影.在任何一个规范中都没有任何地方声明全零的值不会产生阴影.它只说明一个属性可以采用两个可能的值之一:none，或者是一个或多个<shadow>值组的逗号分隔列表，每个值组都对应于一组值:对于text-shadow，它是自己给出的[ <length>{2,3} && <color>? ]#规范.只要您的值不是none，任何一个规范都假定将绘制阴影并根据该假定指定所有行为.

对于这两个属性，即使您未指定颜色，两个规范都指出应使用currentColor(在散文中说它是取自color属性"或墨".它在代码中的结果是currentColor).

由于阴影始终是为none以外的值绘制的，并且长度为零会导致阴影的大小与文本大小完全相同，因此，此处发生的可能是合成两个或多个半透明层字形和阴影(如注释中所述)的抗锯齿引起的像素数.这不仅适用于文本阴影，而且还适用于框阴影，其典型示例在拐角，其中唯一的抗锯齿提示是圆角本身，而不是盒子的笔直边缘.至少基于测试和以前的经验，所有浏览器中也会发生这种情况.

话虽如此，如果您绝对不能接受none作为值，则可以始终为颜色指定transparent.阴影仍然会绘制，但是由于它是完全透明的，因此您将看不到./p>

So, I'm in the process of building a website designer and I have come across something strange, if you set the text-shadow: 0 0 0 someColor on a element the shadow is actually applied, I have made a fiddle where this is very clear here FIDDLE.

Is this a bug?

解决方案

It's not a bug in that it's not an incorrect implementation of the spec; the spec implies that a shadow is generated as long as the computed value is something other than none. The only values that can compute to none are none or initial.

Text shadows are drawn similarly to box shadows. Because of this, most of the behavior of text shadows follows the spec for box shadows. Nowhere in either spec is it stated that a value with all zeros should generate no shadow. All it says is that either property can take one of two possible values: none, or a comma-separated list of one or more <shadow> value groups, each of which corresponds to a set of values: in the case of text-shadow, it's [ <length>{2,3} && <color>? ]# as given in its own spec. As long as you have a value that isn't none, either spec assumes a shadow will be drawn and specifies all the behavior based on that assumption.

For both properties, even if you don't specify a color, both specs state that currentColor should be used (it says in prose that it's "taken from the color property" or "the resulting color of the ink that it shadows"; the result in code is currentColor).

Since the shadow is always drawn for a value other than none, and zero lengths result in a shadow that's exactly the same size as the text, what happens here then is probably the result of compositing two or more layers of semitransparent pixels due to anti-aliasing of the glyphs as well as the shadow (as stated in the comments). This applies not only to text shadows, but also box shadows, an archetypal example of which would be in a box with rounded corners, where the only hints of anti-aliasing are on the rounded corners themselves, and not the straight edges of the box. This also happens in all browsers, at least based on testing and prior experiences.

With all that said, if you absolutely cannot accept none as a value, you can always specify transparent for the color. The shadow will still be drawn, but since it's completely transparent, you won't see it.

这篇关于设置为0时显示的Chrome文字阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！