Question

我尝试使用 CSS text-shadow属性 here为文本添加大纲。
问题是阴影角不会总是相遇。如果你看下面，你可以在Y的右上角看到问题使用这种字体看起来并不太糟糕，但是我的代码使用的某些字体会产生很大的不同。

有没有办法让文字完全被框阴影包围，特别是在角落里？

＆＃13;

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -1px  1px #ff0000, 
    -1px -1px #ff0000, 
     1px  1px #ff0000, 
     1px -1px #ff0000, 
    -2px  2px #ff0000, 
    -2px -2px #ff0000, 
     2px  2px #ff0000, 
     2px -2px #ff0000;
  -webkit-font-smoothing: antialiased;
}

＆＃13;

<div class="shadowOutline">My</div>

＆＃13;

Answer 1

你可以用svg来做，你有一个完美的故事

text{font-size:100px;
  fill: none;
  stroke: red;
  stroke-width:2px;
  stroke-linejoin: round;
}

<svg height="120" width="480">
  <text x="0" y="90" >I love SVG!</text>
</svg>

或者您可以直接使用内联css：

<svg height="100" width="480">
<text x="0" y="80" fill="white" stroke="red" style="font-size:100px;stroke-width:2px;">I love SVG!</text>
</svg>

Answer 2

我设法使用以下方法让它变得更好：

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -2px -2px 0 #ff0000, 
     2px -2px 0 #ff0000, 
    -2px  2px 0 #ff0000, 
     2px  2px 0 #ff0000, 
     2px  0px 0 #ff0000, 
    -2px  0px 0 #ff0000, 
     0px  2px 0 #ff0000, 
     0px -2px 0 #ff0000;
  -webkit-font-smoothing: antialiased;
}

<div class="shadowOutline">My</div>

重点是在所有方向上偏移文本阴影：

左
右
顶
底

但也

左上
右上
左下
右下

请注意，对于大于一个像素的值，您必须填补锐角阴影的间隙。参见例如字母“X”，其中（尝试）十个像素的粗轮廓，首先由八个，第二个由二十四个阴影组成：

参见此示例

span {
  font: normal 200pt Arial;
  color: #fff;
  letter-spacing: 20px
}
.eight-shadows {
  text-shadow:
   -10px -10px 0 #f00, 
    00px -10px 0 #f00, 
    10px -10px 0 #f00, 
    10px  00px 0 #f00, 
    10px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -10px  10px 0 #f00, 
   -10px  00px 0 #f00;
}
.twenty-four-shadows {
  text-shadow: 
   -10px -10px 0 #f00, 
    00px -10px 0 #f00, 
    10px -10px 0 #f00, 
    10px  00px 0 #f00, 
    10px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -10px  10px 0 #f00, 
   -10px  00px 0 #f00,

   -05px -10px 0 #f00, 
    00px -10px 0 #f00, 
    05px -10px 0 #f00, 
    05px  00px 0 #f00, 
    05px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -05px  10px 0 #f00, 
   -05px  00px 0 #f00, 

   -10px -05px 0 #f00, 
    00px -05px 0 #f00, 
    10px -05px 0 #f00, 
    10px  00px 0 #f00, 
    10px  05px 0 #f00, 
    00px  05px 0 #f00, 
   -10px  05px 0 #f00, 
   -10px  00px 0 #f00
}

<span class="eight-shadows">X</span>
<span class="twenty-four-shadows">X</span>

（实际上这个样本可以省略中间的“水平”阴影块，因为它没有尖锐的垂直角落，但为了清晰起见，我把它留在那里。）

要获得“实心”10px转角轮廓，你必须使用288（= 4×9×8）阴影，即使这样，结果也会是锐角附近的垂直或水平线而不是尖角。

Answer 3

如果你能再多做一点＆＃34;模糊＆＃34;在你的大纲中，使用text-shadow上的第三个可选属性可以帮助弥补你在＆＃34; Y＆＃34;上看到的那些差距。

来自MDN article for text-shadow：

值

<color>

可选。可以在偏移之前或之后指定   值。如果未指定颜色，将使用UA选择的颜色。   注意：如果要确保跨浏览器的一致性，请明确   指定一种颜色。

<offset-x> <offset-y>必填。这些长度值   指定阴影与文本的偏移量。 <offset-x>指定   水平距离;负值将阴影置于左侧   文本。 <offset-y>指定垂直距离;负值   将阴影置于文本上方。如果两个值均为0，那么   阴影放在文本后面（可能会产生模糊效果    已设定）。要了解您可以使用的单位，请参阅   。

<blur-radius>可选。这是一个价值。如果不   指定时，默认为0.该值越大，越大   模糊;阴影变得更宽更轻。

＆＃13;

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -1px  1px 4px #ff0000, 
    -1px -1px 4px #ff0000, 
     1px  1px 4px #ff0000, 
     1px -1px 4px #ff0000, 
    -2px  2px 4px #ff0000, 
    -2px -2px 4px #ff0000, 
     2px  2px 4px #ff0000, 
     2px -2px 4px #ff0000;
  -webkit-font-smoothing: antialiased;
}

＆＃13;

<div class="shadowOutline">My</div>

＆＃13;

Answer 4

Headsup：为此目的，您可以使用-webkit-text-stroke（最好与-webkit-text-fill-color结合使用，它也适用于当前的Firefox（49+）：

.shadowOutline {
  font: normal 200pt Arial;
  color: red;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px red;
}

<div class="shadowOutline">My</div>

有能力的浏览器会在透明字母周围呈现轮廓，其他不透明（红色）字母，因此在没有text-shadow支持的浏览器中，这比白色背景上的白色文本更可靠。

角落中的文字阴影轮廓不完整

4 个答案:

值