【CSS】文字描边的三种实现方式

目录

1. 可行的几种方式

  • text-shadow
  • --webkit-text-stroke
  • svg

1.1. text-shadow 描边

MDN text-shadow

代码

html 复制代码
<div class="text stroke">新年快乐</div>

用 text-shadow 实现八个方向的文字阴影。

css 复制代码
.text {
	font-size: 150px;
	color: white;
	font-weight: 400;
}

.stroke {
	text-shadow: 4px 0 #000,
	-4px 0 #000,
	0 4px #000,
	0 -4px #000,
	4px 4px #000,
	-4px -4px #000,
	4px -4px #000,
	-4px 4px #000;
}

优缺点

优点

  • 兼容性好

缺点

  • 文字边缘会有锯齿。

如上图,当文字很大时,尤其明显。因为我们只设置了8个方向的阴影,这些方向交界处容易出问题。

  • 文字必须设置颜色

如果我们把文字设置为透明色,描边就失效了,因为text-shadow本质就是设置文本阴影。

css 复制代码
color: transparent;

效果:文字透明了,文字阴影彻底显现了出来。

1.2. text-stroke 描边

MDN text-stroke

实现

html 复制代码
<div class="text stroke">新年快乐</div>
css 复制代码
.text {
	font-size: 150px;
	color: white;
	font-weight: 400;
}

.stroke {
	-webkit-text-stroke: 4px #000;
}

可以实现丝滑的描边效果!

注意:text-stroke 是居中描边 ,我们这里设置了 4px 的描边,实际上会在文字内部和外部各画2px。直接使用 text-stroke 来描边会让文字本身变瘦

比如,我们继续加大描边的宽度,设置8px。

CSS 复制代码
-webkit-text-stroke: 8px #000;

可以看到最终的效果是文字的白色部分越来越少。

如果你觉得这样无所谓,那这样实现也可以。但如果你不想要文字本身的宽度(白色部分)改变,那么可以用下面的技巧来实现。

我们增加一个伪元素来,完整代码如下:

html 复制代码
<div class="text stroke" data-content="2023, 新年快乐!">2023, 新年快乐!</div>
css 复制代码
.text {
	font-size: 150px;
	color: white;
	font-weight: 400;
	position: relative;
	z-index: 0;
}

.text::after {
	content: attr(data-content);
	-webkit-text-stroke: 8px #000;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

这里我们给伪元素设置描边,并且将原本的文字覆盖在其上面,能完美实现描边,且没有改变原本的文字宽度。

注意:我们原本想实现4px的描边,前面我们提到text-stroke是居中描边,因此为了实现效果我们实际上要设置8px。

优缺点

优点

  • 效果好,描边丝滑。

缺点

  • 兼容性一般,需要加 -webkit 前缀

1.3. svg 描边

实现

html 复制代码
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="200">
 <text 
    class="text stroke"
    x="0" 
    y="0" 
    alignment-baseline="text-before-edge" 
    text-anchor="start"
  >
    2023, 新年快乐!
  </text>
</svg>
css 复制代码
.text {
  font-size: 150px;
  fill: white;
  font-weight: 400;
}

.stroke {
  stroke: #000;
  stroke-width: 4px;
}

通过设置stroke + stroke-width 即可实现描边。

注意:这里实现的效果也类似前面 text-stroke 的居中描边,实际上文字本身也变瘦了。

为了不让文字本身变瘦,我们可以用paint-order属性来改变描边绘制的方式。

css 复制代码
.stroke {
  stroke: #000;
  stroke-width: 8px;
  paint-order: stroke;
}

同样实现了描边效果,且不改变文字原本宽度。

优缺点

优点

  • 兼容性最好
  • 通过 stroke-linejoin 属性,还可以对 svg 的描边有更灵活的控制
css 复制代码
.stroke1 {
  stroke-linejoin: round;
}

.stroke2 {
  stroke-linejoin: bevel;
}

.stroke3 {
  stroke-linejoin: miter;
}

缺点

  • 需要设置svg 的宽高,文字排版可能不够灵活

总结

我们介绍了css中三种文字描边的实现方式,它们各有优缺点,可以根据实际的应用场景选择最合适的方式!

相关推荐
10年前端老司机38 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js