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属性的另一个示例。
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">欢迎访问lidihuo.com网站</h1>
<h2 class="jtp" style="-webkit-text-stroke-color: blue;">这是text-stroke属性的示例</h2>
</body>
</html>
输出:
