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>

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

代码：

<!-- 通过自定义属性 data-content 存储描边文字数据 -->
<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>

三、其他实现方法

要在CSS中给文字添加描边效果，可以使用 text-shadow 属性。该属性用于在文字周围创建阴影，可以模拟出文字描边的效果。

以下是一个示例代码，用于在文字周围创建1像素宽的黑色描边效果：

text-shadow: 1px 1px 0 #000, 
             -1px 1px 0 #000, 
             1px -1px 0 #000, 
             -1px -1px 0 #000;

这个代码中，四个参数分别表示水平方向偏移、垂直方向偏移、模糊半径和阴影颜色。为了模拟出描边效果，我们在文字周围创建了四个方向上的阴影，颜色都是黑色，并且模糊半径为0，即不模糊。

你也可以自定义偏移量和颜色来创建不同效果的描边。例如：

text-shadow: 2px 2px 0 red, 
             -2px 2px 0 red, 
             2px -2px 0 red, 
             -2px -2px 0 red;