html - 文本阴影 CSS 无法正常工作

Question

我正在尝试按照下面的示例制作文本阴影效果:

这是我创建的:

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(1, 96, 116, 1);
  text-transform: uppercase;
}

<div class="yb-shipping">Free Shipping</div>

无法按附件制作，我应该尝试除文字阴影之外的其他东西吗？

请推荐

Answer 1

如果您使用模糊半径，阴影会变得模糊，这不是预期的结果。
但是，您可以使用多个文本阴影。这就是解决方案:在不同的方向添加几个模糊半径均为 0 的模糊半径。

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-shadow: -2px -2px 0 rgba(1, 96, 116, 1),
               2px -2px 0 rgba(1, 96, 116, 1),
               -2px 2px 0 rgba(1, 96, 116, 1),
               2px 2px 0 rgba(1, 96, 116, 1),
               -3px 0 0 rgba(1, 96, 116, 1),
               3px 0 0 rgba(1, 96, 116, 1),
               0 -3px 0 rgba(1, 96, 116, 1),
               0 3px 0 rgba(1, 96, 116, 1);
  text-transform: uppercase;
}

<div class="yb-shipping">Free Shipping</div>