有时，我们需要只显示文本的轮廓并删除文本的填充。也可以说是轮廓效果。
我们可以使用各种CSS属性来为文本生成轮廓效果。例如，我们可以给文本添加边框，去掉文本的填充色，给文本添加轮廓效果。
在这里，我们使用 HTML 和 CSS 三种不同的方法来显示具有轮廓效果的文本。
使用各种CSS属性
在此方法中，我们将使用三个 CSS 属性为文本添加轮廓效果。第一个是“-webkit-text-fill-color”，用于将文本的填充颜色更改为与背景颜色相同。第二个是“-webkit-text-lines-width”，用于添加文本的描边宽度，第三个 CSS 属性是“-webkit-text-lines-color”，用于向文本添加轮廓颜色。
语法
用户可以按照以下语法使用三种不同的 CSS 属性为文本添加轮廓效果。
-webkit-text-fill-color: color;-webkit-text-stroke-width: size;-webkit-text-stroke-color: color;
在上面的语法中，我们设置了文本的填充颜色、描边宽度，描边表示轮廓颜色。
Example 1
的中文翻译为：
示例1
在下面的示例中，我们有一个带有类名为’text1’的div元素，其中包含一些文本。我们已经在CSS中设置了文本的字体大小。此外，为了给文本添加轮廓效果，我们设置了白色填充颜色、’1px’的描边宽度和’blue’的描边颜色以显示蓝色轮廓。
在输出中，用户可以观察到带有蓝色轮廓的文本。
.text1 { font-size: 50px; -webkit-text-fill-color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: blue; } Using the different CSS properties to add outline effect on the text.
This text has a default background.
Example 2
的翻译为：
示例2
在下面的示例中，我们为div元素设置了红色背景。接下来，我们使用’red’作为填充颜色，使填充颜色与背景相同。在这里，描边宽度为’1.2px’，描边颜色为’yellow’。
在输出中，用户可以观察到红色背景上带有黄色轮廓的文本。
.text { font-size: 50px; width: 600px; height: auto; background-color: red; -webkit-text-fill-color: red; -webkit-text-stroke-width: 1.2px; -webkit-text-stroke-color: yellow; } Using the different CSS properties to add outline effect on the text
This text has a red background.
使用“Text-shadow”CSS 属性
在这种方法中，我们将使用“text-shadow”CSS属性为文本生成轮廓效果。如果我们通过将相同的文本颜色设置为背景颜色来隐藏文本，并仅显示文本阴影，我们可以生成轮廓效果。
语法
用户可以按照以下语法使用“text-shadow”CSS属性为文本添加轮廓效果。
text-shadow: x-offset y-offset blur color;
“text-shadow”属性采用 4 个不同的值来设置阴影。第一个是 x 偏移，第二个是 y 偏移，第三个是模糊值，第四个是阴影颜色。
Example 3
可以直接保留不翻译
在下面的示例中，div元素包含文本。在CSS中，我们将背景颜色和字体颜色设置为相同。然后，我们使用了’text-shadow’ CSS属性来添加轮廓效果。在这里，我们使用了4对4个值作为’text-shadow’的值。第一对是用于右侧阴影，第二对是用于下方阴影，第三对是用于左侧阴影，最后一对是用于上方阴影。
实际上，它显示的是文本阴影而不是描边，生成了轮廓效果。
.text { color: rgb(117, 117, 235); font-size: 50px; background-color: rgb(117, 117, 235); text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red; } Using the text-shadow CSS property to add outline effect on the text
Welcome to the TutorialsPoint!
在 标记内添加文本并对文本应用描边
在这里，我们将文本转换为 SVG 图像。之后，我们将设置描边颜色、填充颜色、描边宽度等，使用各种CSS属性为文本添加轮廓效果。
语法
用户可以按照以下语法将文本转换为SVG，从而为文本添加轮廓效果。
paint-order: stroke;fill: color;stroke: color;
在上面的语法中，我们设置了文本的填充颜色。此外，我们还设置了文本的描边颜色。 “paint-order: stroke”CSS 属性允许我们在填充颜色彼此相交时通过笔划重叠填充颜色。
Example 4
的中文翻译为：
示例 4
在下面的示例中，我们使用了 HTML标签来创建一个HTML元素，并使用 HTML标签在SVG内添加文本。在CSS中，我们将’stroke-width’设置为3px以显示3px的轮廓，并将’stroke-linejoin’设置为round，这样每当两条线连接时，它们会以圆形连接。此外，我们使用’fill: white’将文本颜色设置为与背景颜色相同，并使用’stroke’将文本显示为棕色轮廓。
svg { font-size: 35px; width: 490px; height: 100; } .text { stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; fill: white; stroke: brown; } Using the SVG text to add outline effect on the text
This text is in the svg element
我们已经看到了三种为文本添加轮廓效果的方法。第一种方法使用三个不同的 CSS 属性来更改文本的填充颜色并设置文本的描边。
第二种方法显示“文本阴影”而不是显示文本。第三种方法将文本转换为 SVG，并使用与 SVG 相关的各种 CSS 属性为文本添加轮廓效果。
以上就是什么是文字轮廓效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625301.html
微信扫一扫 
支付宝扫一扫 
