0

我正在尝试使用阴影来勾勒文本——这是我从其他 stackoverflow 线程中获得的解决方案。目前，几乎不支持 text-outline 和 text-stroke。

我在其中一封信上出现了奇怪的行为。

要使用我所做的影子黑客：

<div id="background">
 <h1 id="buzz-joy">BU<span id="small-raised-z">Z</span>Z-JOY</h1>
</div>

和

#background {
    height 100px;
    text-align: center;
    background-color: grey;
}
#buzz-joy {
    font-family:"Arial Black";
    color: Yellow;
    font-size:4em;
    display: inline-block;
    text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px 2px 0 black, -2px -2px 0 black;
    padding: 0;
    margin: 0;
}

要得到

http://jsfiddle.net/abalter/e3QUp

但我在“Y”上有一个奇怪的行为。

有关如何解决该问题的任何建议？

4

1 回答 1

2

这个技巧通过设置 4 个阴影，向 4 个对角线方向起作用。

这适用于直边和方角，但不适用于 Y 的上括号，它们的角度不好。

我能想到的解决这个问题的唯一方法是增加阴影的数量，根据需要指向尽可能多的角度，直到你对结果感到满意。

您拥有的阴影大约为 3 px 长（2+2 + 2*2 的平方根），因此您可以使用 3*cos(a) 3*sin(a) 样式中的其他值

于 2013-09-17T21:04:33.917 回答