text-stroke是外描边,内描边还是居中描边测试实例页面

回到相关文章 »

效果:

没有描边

有描边

重叠描边

代码:

CSS代码:
.p1,
.p2,
.p3 {
    font: menu;
    font-size: 40px;
    margin: 0;
}
.p2 {
    -webkit-text-stroke: 2px red;
}
.p3 {
    position: relative;
    z-index: 0;
}
.p3::before {
    content: attr(data-text);
    position: absolute;
    -webkit-text-stroke: 2px red;
    z-index: -1;
}
HTML代码:
<p class="p1">没有描边</p>
<p class="p2">有描边</p>
<p class="p3">重叠描边</p>