文本阴影不透明度

Question

是否可以仅调整文本阴影的不透明度，而不是文本本身？

例如，我有带有蓝色阴影的紫色文本。我想让蓝色阴影具有不透明度，而不丢失紫色上的任何东西。

h1.blue {text-shadow: 3px 3px 0px #3f6ba9;}

Answer 1

是的，但在 rgba 模式下指定颜色以添加 alpha 透明度。

h1.blue {text-shadow: 3px 3px 0px rgba(63,107,169, 0.5)} //half of transparency

Answer 2

为任何想要使用十六进制代码而不是 RGB 的人添加答案：

h1.blue {text-shadow: 3px 3px 0px #3f6ba980;}

上述十六进制代码中的最后 2 个字符的不透明度设置为 50%。对于其他不透明度值，请参阅此处链接的不透明度十六进制图表。或者，如果您使用 VScode，您将能够使用其内置的颜色选择器来调整不透明度。

Answer 3

如果你想让阴影more不透明，那么你可以添加多个重复阴影。例如，这会在文本周围放置一个相当坚固的白色光环......

text-shadow:  0px 0px 2px white,0px 0px 2px white,0px 0px 2px white

我使用这种阴影样式来确保浮动黑色文本即使漂浮在其他黑色或深色内容上也清晰可见。