CSS实现文字描边效果

Posted 2023-03-23 努力的小朱同学

一、介绍

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

二、具体代码

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>

页面效果：

三、其他实现方法

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

一分钟教你如何实现唯美的文字描边

前两天有一个原来的同事问我文字描边怎么做,那么今天我们就来说说文字描边这个样式怎么实现.

一.文字描边
-webkit-text-stroke 文字描边
参数:
参数1 描边大小
参数2 描边颜色

注意: webkit内核有效 只能使用在谷歌 ,safir有效

-webkit-text-stroke: 1px red;

二.实例

上图的效果我们怎样来实现呢?

HTML结构
CSS样式
字体样式
字体颜色
文字描边
文本阴影
那我们来看一下具体代码:

HTML:

<p>我最亲爱的,你过得怎么样?没我的日子,你别来无恙.</p>

CSS:

p{

  font-size: 45px;                               /*字体大小*/ 
  font-weight: 700;                             /*字体加粗*/ 
  font-family: "华文行楷";                       /*字体样式*/ 
  text-align: center; 
  color: #fff; 
    
  -webkit-text-stroke: 1px pink;              /*字体描边 1px的描边大小 粉色*/ 
  text-shadow: 5px 5px 5px rgba(211,211,211,0.6);   /*文本阴影*/ 
  } 

其实文字描边很简单,在给样式的时候注意你给的样式顺序,以及大小,以达到目的为基准就可以了.样式并不可怕,可怕的是你的粗心大意!