CSS实现文字描边效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

页面效果：

CSS实现文字描边效果

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>