Text Shadow CSS无法正常工作

Question

我正在尝试按照以下示例制作文本阴影效果：

这就是我创造的：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

除了text-shadow之外我还应该尝试其他什么吗？

请建议

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以组合多个阴影

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

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

Answer 3

请参阅以下内容： -

https://jsfiddle.net/enryhfz3/

如果您将text-shadow更改为： -

text-shadow:
    -1px -1px 5px rgba(1, 96, 116, 1),  
    1px -1px 5px rgba(1, 96, 116, 1),
    -1px 1px 5px rgba(1, 96, 116, 1),
    1px 1px 5px rgba(1, 96, 116, 1);

Answer 4

您可以使用-webkit-text-stroke，如下所示：

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

Answer 5

此生成器可以帮助您使文本阴影更加适应。 http://css3gen.com/text-shadow/和http://www.css3generator.in/text-shadow.html 代码可以直接复制和粘贴。