css3可以加描边，方法：1、使用text -s hadow属性，通过给文字周围添加文字阴影来实现描边效果；2、使用text- stroke 属性，语法“text-stroke:描边 宽 度 颜色;”；3、 利用 SVG给文字加描边。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
text-shadow 文字描边
text-shadow:向文本设置阴影。
text-shadow:color||length||length||opac IT y
color:指定颜色。
length:第一个length指定阴影在水 平方 向上的延伸 距离 ，第二个length指定阴影在垂直 方向 上的延伸距离，可以为负值。
opacity:指定阴影模糊效果的作用距离。
用逗号分隔的4个属性值代表的方向顺序为右下左上。
<!DOCTY PE html>
<html>
<head>
< ;m eta charset="UTF-8">
<title>text-shadow-文字描边</title>
<style>
.demo {
h ei ght: 200px;
text-align: center ;
font-f ami ly: 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 -t ext-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 -i mage: linear-gra die nt(#F fc F02, #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;
}可以得到这样的效果
和 CSS 表现一样，都是居中描边，也无法改变。
不一样的是，SVG 控制更为灵活， 默认是先填充、然后再描边 ，所以看着是描边在填充之上，但是，我们可以改变这种规则，设置先描边，再填充，那么填充的颜色就会覆盖在描边之上了。SVG 中改变这种规则的可以通过 p ai nt-order 来设置。
.text{
/*其他*/
stroke-width: 4px;
stroke: #333;
paint-order: stroke; /*先描边*/
}这样就实现了外描边效果，是不是比 CSS 方便许多？
（学习视频分享：css视频教程）
以上就是css3可以加文字描边吗的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css3可以加文字描边吗 全部内容，希望文章能够帮你解决 css3可以加文字描边吗 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。