CSS paint-order实现文字外描边效果实例页面

回到相关文章 »

效果：

张旭旭是大帅锅 张旭旭是大帅锅

代码：

CSS代码：
svg {
    background-color: deepskyblue;
    fill: crimson;
    stroke: white;
    stroke-width: 6px;
    font-size: 40px;
    font-weight: bold;
}
.paint-order {
    paint-order: stroke;    
}
HTML代码：
<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50">张旭旭是大帅锅</text>
    <text x="10" y="120" class="paint-order">张旭旭是大帅锅</text>
</svg>