text-stroke

-webkit-text-stroke

-webkit-text-stroke 属性是 -webkit-text-stroke-width 和 -webkit-text-stroke-color 的简写,用于元素的描边效果。

1
2
<p>仕而优则学</p>
<p class="stroke">仕而优则学</p>
1
2
3
4
5
6
7
8
9
10
11
p {
text-align: center;
margin: 15px;
font-size: 30px;
font-weight: 400;
color: yellow;

&.stroke {
-webkit-text-stroke: .5px #333;
}
}

Demo

-webkit-text-stroke-width

指定描边的宽度

1
2
3
4
5
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

-webkit-text-stroke-width: <length>;

-webkit-text-stroke-color

指定描边的颜色,如果未指定,则默认为 color 属性的值

1
2
3
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

对比 text-shadow

想要描边效果,text-shadow 也可以模拟实现

1
2
3
<p>仕而优则学</p>
<p class="stroke">仕而优则学</p>
<p class="shadow">仕而优则学</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
text-align: center;
font-size: 30px;
margin: 20px;
font-weight: 400;
color: yellow;

&.stroke {
-webkit-text-stroke: 1px #333;
}

&.shadow {
text-shadow: #333 1px 0, #333 -1px 0, #333 0 1px, #333 0 -1px;
}
}

Demo

从效果上看,确实实现了描边;但实际上,text-shadow 只是在元素盒子四个方向的投影,放大之后就会看到四个角之间会有间隙。

另外,如果需要多重描边,text-shadow 可以不断叠加阴影,但 text-stroke 无法实现或只能借助伪元素实现两层描边。

参考