使用CSS，如何创建比1px更“厚”的文本笔触轮廓？ [英] Using CSS, how do you create a text stroke outline that is *thicker* than 1px?

问题描述

下面是我用来做1px的Text Stroke轮廓的代码。但是，如何使轮廓变粗呢？如果我只用 5px替换所有 1px，结果看起来很疯狂。

Below is the code I was using to do a Text Stroke outline of 1px. But how do I get the outline thicker? If I just replace all "1px" with "5px", the result looks crazy.

HTML

<div class="element">
Hello!
</div>

CSS

.element {
color:white;

    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

推荐答案

您可以使用 SVG ，尽管它需要更多代码：

You might use SVG as well, though it requires more code:

.element {
  font-size: 50px;
}

svg {
  width: 100%;
  height: 1.3em;
}

svg text {
  fill: pink;
  stroke-width: 8px;
  paint-order: stroke;
  stroke: violet;
}

<div class="element">
  <svg><text x="8px" y="75%">Hello kitty!</text></svg>
</div>

这篇关于使用CSS，如何创建比1px更“厚”的文本笔触轮廓？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！