使用 CSS,如何创建比 1px *粗*的文本笔划轮廓?
Using CSS, how do you create a text stroke outline that is *thicker* than 1px?
下面是我用来制作 1px 文本描边轮廓的代码。但是如何使轮廓变粗呢?如果我只是用“5px”替换所有“1px”,结果看起来很疯狂。
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;
}
可以考虑text-stroke
但需要注意to browser support
.element {
color: white;
font-size:50px;
-webkit-text-stroke: 5px #000;
}
<div class="element">
Hello!
</div>
您也可以使用 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>
下面是我用来制作 1px 文本描边轮廓的代码。但是如何使轮廓变粗呢?如果我只是用“5px”替换所有“1px”,结果看起来很疯狂。
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;
}
可以考虑text-stroke
但需要注意to browser support
.element {
color: white;
font-size:50px;
-webkit-text-stroke: 5px #000;
}
<div class="element">
Hello!
</div>
您也可以使用 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>