CSS-文字描边-webkit-text-stroke属性

四月 17, 2019 本文总阅读量次

之前工作中遇到需要文字描边的情况，学习到了text-stroke属性，记录总结一下。

-webkit-text-stroke CSS属性为文本字符指定了宽和颜色。它是-webkit-text-stroke-width 和-webkit-text-stroke-color属性的缩写。

🌰栗子

/* Width and color values */
-webkit-text-stroke: 4px navy;
/* Global values */
-webkit-text-stroke: inherit / initial / unset;

描边过后大概酱紫

如果想要实现多重描边效果，伪元素(:before + :after)多层叠加模拟。

🌰栗子

1	<p id="example" data-text="The stroke of this text is pink.">The stroke of this text is pink.</p>

<style>
  #example {
  font-size: 48px;
  margin: 0;
  -webkit-text-stroke: 2px pink;
 }  #example::before, #example::after {
  content: attr(data-text);
  position: absolute;
  left: 8px;
  z-index: -1;
 }  #example::before {
  -webkit-text-stroke: 20px yellow;
 }  #example::after {
  -webkit-text-stroke: 10px red;
 }

效果是这样：

解析一下上面的代码：

:before CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容，默认为行内元素。 :after

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容，默认是行内元素。

所以加上伪元素后的html结构大致是这样的：

<p>标签
	:before 文本节点
	p标签的文本节点
	:after 文本节点
</p>标签

设置z-index属性让伪元素置于p标签的文本节点下方（z-index与position: absolute配合才能生效）。

其次要注意的是，由于伪元素:after在:before上层，所以:before的宽度要大于:after，不然会被覆盖。（至于为什么:after在:before上册我也没有找到靠谱的资料，我只能猜想这和css的渲染规则有关。）

另外，代码中还涉及到了data-*和content的相关内容，这部分可以参阅以下资料学习。
HTML data-* Attributes | w3c
CSS content and attr

另外，还可以配合使用-webkit-background-clip和-webkit-text-fill-color属性，让文字变得更有设计感。

(END)

::before | MDN
::after | MDN