首页 > web前端 > css教程 > 正文

什么是文字轮廓效果?

WBOY
发布: 2023-08-23 21:25:02
转载
1281 人浏览过

什么是文字轮廓效果?

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

我们可以使用各种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 属性为文本添加轮廓效果。

以上是什么是文字轮廓效果?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板