CSS实现文字描边效果

一、介绍

最近在一个项目的宣传页中，设计师使用了文字描边效果，之前我确实没有实现过文字的描边效果，然后我在查阅资料后，知道了实现方法。文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。

二、具体代码

1、文字内外双描边效果

这种描边效果相当于内外同时占用相同的描边宽度，只需要借助一个css属性：text-stroke: width color 即可，该属性的第一个值表示描边的宽度，第二个值表示描边的颜色。

代码：

<p class="plan-bg1">
	这里使用了内外描边文字效果
p>
<style>
.plan-bg1 {
  font-size: 30px;
  font-weight: 900;
  /* 设置描边宽度及颜色 默认为字体内外描边 */
  text-stroke: 2px #2173FF;
  /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
  -webkit-text-stroke: 2px #2173FF;
  color: #fff;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

页面效果：

2、文字外描边效果

文字外描边效果需要结合元素自定义属性data-content、伪元素::before、attr()以及text-stroke等多种属性才能实现。其原理为：给描边文本通过text-stroke: width color 设置描边效果，但此时为内描边，然后data-content的内容要与描边文本内容相同，通过attr()方法获取到data-content的内容，并结合::before将文本渲染出来，然后通过position: absolute 将其覆盖在要描边文字的上面，并将伪元素文本的描边要设置为0，最终就实现了文字的外描边效果。
总结：在内描边的文本上覆盖了一层文本，将text-stroke: width color 向内描边的部分给挡住，就只剩下了向外描边的部分，从而实现外描边效果。

代码：

<p class="plan-bg2" data-content="这里使用了外描边文字效果">
	这里使用了外描边文字效果
p>
<style>
.plan-bg2 {
  font-family: Heavy;
  font-size: 30px;
  font-weight: 900;
  /* 设置描边宽度及颜色 */
  text-stroke: 2px #2173FF;
  /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
  -webkit-text-stroke: 2px #2173FF;
}
/* 通过属性选择器结合伪元素before 实现文字外描边效果 */
[data-content]::before {
  /* attr()是用来获取被选中元素的某属性值,并且在样式文件中使用 */
  content: attr(data-content);
  position: absolute;
  /* 实现元素外描边的关键 */
  -webkit-text-stroke: 0;
  /* 文本颜色 */
  color: #fff;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

页面效果：

三、其他实现方法

我们还可以通过canvas画布，来实现绘制描边文字效果。
具体请看：HTML5 学习笔记（六）— canvas 画布