CSS3中如何给文字添加轮廓效果？

发布时间：2024-07-05 15:02:45 所属栏目：语言来源：DaWei

导读： 这篇文章给大家分享的是利用CSS3怎样实现文字描边效果。小编觉得挺实用的，因此分享给大家做个参考，文中给大家介绍了三种方法，示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随

这篇文章给大家分享的是利用CSS3怎样实现文字描边效果。小编觉得挺实用的，因此分享给大家做个参考，文中给大家介绍了三种方法，示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

text-shadow 文字描边
text-shadow:向文本设置阴影。
text-shadow:color||length||length||opacity

color:指定颜色。

length:第一个length指定阴影在水平方向上的延伸距离，第二个length指定阴影在垂直方向上的延伸距离，可以为负值。

opacity:指定阴影模糊效果的作用距离。

用逗号分隔的4个属性值代表的方向顺序为右下左上。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>text-shadow-文字描边</title>
       <style>
           .demo {
               height: 200px;
               text-align: center;
               font-family: Verdana;
               font-size: 30px;
               font-weight: bold;
               background: peru;
               color: #000;
           }

           .stroke {
               text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
           }
       </style>
   </head>

   <body>
       <div class="demo">
           <p>没有添加描边</p>
           <p class="stroke">添加了字体描边</p>
       </div>
   </body>

</html>

text-stroke 文字描边

CSS 中有个专门用于文字描边的属性 -webkit-text-stroke，可以控制描边的宽度和颜色，比如
.text{
-webkit-text-stroke: 2px #333;
}

确实有描边了，但是文字好像瘦了一圈，如果觉得不太明显，可以再设置大一点

从这里可以看出，-webkit-text-stroke其实是居中描边，并且是覆盖在文本上的，也无法更改描边方式。而事实上，很多设计工具都是可以选择描边方式的，比如 figma

也是可以的！用两层文本，一层文本描边，一层文本渐变就可以了，为了节省标签，可以用伪元素来生成

<p class="text" data-title="为你定制发现精彩">为你定制发现精彩</p>
::before设置渐变，位于上方，原文本设置描边，位于下方，注意把 ::before的-webkit-text-stroke去除

.text::before{

原创图片与内容无关,仅为配文美观

content: attr(data-title);
position: absolute;
background-image: linear-gradient(#FFCF02, #FF7352);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0;
}
.text{
-webkit-text-stroke: 6px #333;
}

SVG 文字描边
SVG 也可以实现描边效果，和 CSS 比较类似，应该说 CSS 是借鉴 SVG 的，通过 stroke 和 stroke-width来控制描边颜色和大小，比如
.text{
/*其他*/
stroke-width: 4px;
stroke: #333;
}

不一样的是，SVG 控制更为灵活，默认是先填充、然后再描边，所以看着是描边在填充之上，但是，我们可以改变这种规则，设置先描边，再填充，那么填充的颜色就会覆盖在描边之上了。SVG 中改变这种规则的可以通过 paint-order 来设置。

.text{
/*其他*/
stroke-width: 4px;
stroke: #333;
paint-order: stroke; /*先描边*/
}

关于利用CSS3实现文字描边效果的方法就介绍到这，上述三种方法及示例都具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助。

（编辑：好传媒网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!