使用CSS，如何创建比1px *粗*的文本笔划轮廓？
使用CSS，如何创建比1px *粗*的文本笔划轮廓？
提问于 2018-07-22 04:00:16
下面是我用来做一个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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-22 04:52:18
您也可以使用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>
Stack Overflow用户
发布于 2018-07-22 04:07:48
你可以考虑text-stroke，但是你需要注意to browser support
.element {
color: white;
font-size:50px;
-webkit-text-stroke: 5px #000;
}<div class="element">
Hello!
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51459653
复制相关文章
相似问题