什么是文字轮廓效果？

百变鹏仔 3个月前 (09-20) #CSS

文章标签轮廓

有时，我们需要只显示文本的轮廓并删除文本的填充。也可以说是轮廓效果。

我们可以使用各种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'的描边颜色以显示蓝色轮廓。

在输出中，用户可以观察到带有蓝色轮廓的文本。

<html><head>   <style>      .text1 {         font-size: 50px;         -webkit-text-fill-color: white;         -webkit-text-stroke-width: 1px;         -webkit-text-stroke-color: blue;      }   </style></head><body>   <h2>Using the <i> different CSS properties </i> to add outline effect on the text.</h2>   <div class = "text1">This text has a default background.</div></body></html>

Example 2

的翻译为：

示例2

在下面的示例中，我们为div元素设置了红色背景。接下来，我们使用'red'作为填充颜色，使填充颜色与背景相同。在这里，描边宽度为'1.2px'，描边颜色为'yellow'。

在输出中，用户可以观察到红色背景上带有黄色轮廓的文本。

<html><head>   <style>      .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;      }   </style></head><body>   <h2>Using the <i> different CSS properties </i> to add outline effect on the text</h2>   <div class = "text"> This text has a red background. </div></body></html>

使用“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'的值。第一对是用于右侧阴影，第二对是用于下方阴影，第三对是用于左侧阴影，最后一对是用于上方阴影。

实际上，它显示的是文本阴影而不是描边，生成了轮廓效果。

<html><head>   <style>      .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;      }   </style></head><body>   <h2>Using the <i> text-shadow CSS property </i> to add outline effect on the text</h2>   <div class = "text"> Welcome to the TutorialsPoint! </div></body></html>

在标记内添加文本并对文本应用描边

在这里，我们将文本转换为 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'将文本显示为棕色轮廓。

<html><head>   <style>      svg {         font-size: 35px;         width: 490px;         height: 100;      }      .text {         stroke-width: 3px;         stroke-linejoin: round;         paint-order: stroke;         fill: white;         stroke: brown;      }   </style></head><body>   <h2>Using the <i> SVG text </i> to add outline effect on the text</h2>   <svg viewBox = "0 0 490 100">      <text class = "text" x = "10" y = "45"> This text is in the svg element </text>   </svg></body></html>

我们已经看到了三种为文本添加轮廓效果的方法。第一种方法使用三个不同的 CSS 属性来更改文本的填充颜色并设置文本的描边。

第二种方法显示“文本阴影”而不是显示文本。第三种方法将文本转换为 SVG，并使用与 SVG 相关的各种 CSS 属性为文本添加轮廓效果。

文章推荐

什么是文字轮廓效果？

使用各种CSS属性

语法

Example 1

示例1

Example 2

示例2

使用“Text-shadow”CSS 属性

语法

Example 3

在 标记内添加文本并对文本应用描边

语法

Example 4

示例 4

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写

在标记内添加文本并对文本应用描边