如何使用CSS创建比1px更厚的文本笔画大纲?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (32)

下面是我用来做1px文本笔画大纲的代码。但是怎样才能使轮廓变厚呢?如果我把所有的“1px”替换成“5px”, 效果并不好。

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此外,它还需要更多代码:

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

用户回答回答于

你可以考虑text-stroke但你需要注意 https://caniuse.com/#search=text-stroke。

.element {
  color: white;
  font-size:50px;
  -webkit-text-stroke: 5px #000;
}
<div class="element">
  Hello!
</div>

扫码关注云+社区

领取腾讯云代金券