两行css代码快速实现文字描边效果

fox/ 2023年08月18日/ CSS教程/ 浏览 1542

在网站中,我们可以通过css实现文字描边,模拟霓虹灯的效果,实现方法非常简单,只需要两行css就可以实现。实现效果如下图:



增加效果之前,可以参考追格官网首页:www.zhuige.com

实现方法如下,增加一个描边效果类,调整边框宽度,颜色,或者用rgba调整边框透明度,结合自己情况适配即可实现不错的效果


.out-headline {
  color: transparent;
  -webkit-text-stroke: 1px #66dfcc;
}


在需要应用的地方调用该类即可,例如:


原始
<h1 class="zhuige-animated">
调用
<h1 class="zhuige-animated out-headline">

发表评论

暂无评论,抢个沙发...

客服 工单