CSS text-stroke

CSS text-stroke

此CSS属性为文本添加了描边,并为其提供了修饰选项。它定义了文本字符的笔触颜色和宽度。
此CSS属性是以下两个属性的简写:
text-stroke-width:描述描边效果的粗细并采用单位值。
text-stroke-color:它采用颜色的值。
笔画只能与
-webkit-前缀一起使用。

示例

 <!DOCTYPE html> 
<html>
 
<head>
    <title>
        CSS text-stroke property
    </title>
          <style>
        body{
        text-align: center;
        }
        .jtp {
            color: white;
            font-size: 50px;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: red;
        }
    </style>
</head>
 
<body>
    <h1 class= "jtp">欢迎来到立地货平台</h1>
    <h2 class= "jtp" style= "-webkit-text-stroke-color: blue;">这是text-stroke属性示例</h2>
</body>
 
</html>
输出:

CSS text-stroke_https://bianchenghao6.com_【CSS 教程】_第1张

让我们看一下CSS text-stroke属性的另一个示例。

Example2

在此示例中,我们使用
-webkit-text -fill-color ,用于指定文本字符的填充颜色。除了这个属性,我们可以使用
color 属性。与color属性类似,
-webkit-text-fill-color 填充元素文本内容的前景色。
 <!DOCTYPE html>
<html>
<head>
    <title>
        CSS text-stroke property
    </title>
    <style>
    body {
        text-align: center;
    }
    .jtp {
        font-size: 75px;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: red;
        -webkit-text-fill-color: yellow;
        text-shadow: 5px 5px 6px gray;
    }
    </style>
</head>
<body>
    <h1 class="jtp">欢迎访问bianchenghao6.com网站</h1>
    <h2 class="jtp" style="-webkit-text-stroke-color: blue;">这是text-stroke属性的示例</h2>
</body>
</html>
输出:

CSS text-stroke_https://bianchenghao6.com_【CSS 教程】_第2张