Question

我正在尝试使用shadow来概述文本 - 我从其他stackoverflow线程获得的解决方案。目前，几乎不支持文本大纲和文本笔划。

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

使用影子黑客我做了：

<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”有一种奇怪的行为。

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

Answer 1

这个技巧通过设置4个阴影，转到4个对角线方向来实现。

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

我能想到解决这个问题的唯一方法是增加阴影数量，指向所需的角度，直到你对结果满意为止。

你拥有的阴影大约3 px长（2 + 2 + 2 * 2的平方根），所以你可以使用风格3 * cos（a）3 * sin（a）中的其他值

如何使用html5 / css3概述文本？

1 个答案: