Text Shadow Generator
CSS text shadow
CSS text shadow 在您的浏览器中本地运行
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
文本阴影生成器通过实时预览和 CSS 设置文本后面阴影的偏移、模糊、颜色和不透明度。与 box-shadow 不同，它没有展开值，这让人们感到困惑：使文本阴影更重的唯一方法是在一个声明中堆叠多个阴影。它对于易读性最有用，可以在照片上的浅色文本后面添加微妙的深色阴影，并且它永远不应该使文本变得可读，因为它会在背景发生变化时消失。
Where people use the
- 添加微妙的阴影，以便在照片上显示标题。
- 制作压制或雕刻的标题效果。
- 制作复古或霓虹灯文本处理。
- 测试阴影需要有多重才显得廉价。
How to use the
- 1
设置偏移量
偏移 X 向右移动，偏移 Y 向下移动。一两个像素的偏移读取为深度；任何更大的东西都开始看起来像阴影。
- 2
设置模糊
模糊可以柔化边缘。零提供了文本的硬复制，这就是轮廓和复古效果的制作方式。
- 3
选择颜色和不透明度
浅色背景上的深色文本需要浅色阴影，反之亦然。保持较低的不透明度，除非您想要明显的效果。
- 4
复制 CSS
该规则包括 rgba 颜色，准备粘贴。
- 5
如果您需要更多重量，请堆叠阴影
在样式表中添加第二个阴影，并用逗号分隔。这是加厚文本阴影的唯一方法，因为没有扩散。
提示和最佳实践
- 少即是多：低不透明度的一两个像素胜过严重的模糊。
- 切勿仅依赖影子来实现可访问性；修复下面的对比度。
- 请记住，该属性是继承的，因此将其范围限制为您所指的元素。
常见问题
为什么没有点差值？
因为text-shadow不支持。它的语法是偏移量 X、偏移量 Y、仅模糊和颜色。为了模拟扩散，您可以堆叠几个偏移量略有不同的相同阴影。
我可以用它来使图像上的文本可读吗？
只能作为补充。阴影在边缘有帮助，但在繁忙区域则失败，并且它不计入 WCAG 对比度（根据背景颜色进行测量）。如果易读性确实很重要，请添加稀松布或实心面板。
如何勾画文字轮廓？
在每个方向的正负一个像素处堆叠四个阴影，模糊为零。这会产生轮廓效果，而不需要 -webkit-text-lines，但并非所有地方都支持。
它会减慢页面速度吗？
单个静态阴影几乎不需要任何成本。对文本阴影进行动画处理，或将大的模糊阴影应用于大量文本，是重绘成本出现的地方。
是否被子元素继承？
是的。文本阴影是继承的，因此将其设置在容器上会将其应用于每个带有文本的后代，这有时会令人惊讶。