css3可以加文字描边吗
发布时间：2025-02-23 点击：25
css3可以加描边，方法：1、使用text-shadow属性，通过给文字周围添加文字阴影来实现描边效果；2、使用text-stroke属性，语法“text-stroke:描边宽度 颜色;”；3、利用svg给文字加描边。
本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
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;}
可以得到这样的效果
和 css 表现一样，都是居中描边，也无法改变。
不一样的是，svg 控制更为灵活，默认是先填充、然后再描边，所以看着是描边在填充之上，但是，我们可以改变这种规则，设置先描边，再填充，那么填充的颜色就会覆盖在描边之上了。svg 中改变这种规则的可以通过 paint-order 来设置。
.text{ /*其他*/ stroke-width: 4px; stroke: #333; paint-order: stroke; /*先描边*/}
这样就实现了外描边效果，是不是比 css 方便许多？
（学习视频分享：css视频教程）
国内外云服务器价格对比
域名怎么交易？有哪些方式可以交易域名
Nginx禁止IP访问 只允许域名访问
通州数据中心项目达成两协议 合同金额达10.52亿
该网页无法正常运作未发送任何数据
网站用腾讯云服务器
微软改变主意称Xbox One天蝎座将会有VR独占游戏
双十一阿里云服务器网络慢
本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
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;}
可以得到这样的效果
和 css 表现一样，都是居中描边，也无法改变。
不一样的是，svg 控制更为灵活，默认是先填充、然后再描边，所以看着是描边在填充之上，但是，我们可以改变这种规则，设置先描边，再填充，那么填充的颜色就会覆盖在描边之上了。svg 中改变这种规则的可以通过 paint-order 来设置。
.text{ /*其他*/ stroke-width: 4px; stroke: #333; paint-order: stroke; /*先描边*/}
这样就实现了外描边效果，是不是比 css 方便许多？
（学习视频分享：css视频教程）
国内外云服务器价格对比
域名怎么交易？有哪些方式可以交易域名
Nginx禁止IP访问 只允许域名访问
通州数据中心项目达成两协议 合同金额达10.52亿
该网页无法正常运作未发送任何数据
网站用腾讯云服务器
微软改变主意称Xbox One天蝎座将会有VR独占游戏
双十一阿里云服务器网络慢
下一篇：云服务器租用怎样收费