让我为大家介绍一下text-stroke
大家是否想过要弄一个描边过的文字,接下来,text-stroke就可以为你解决
text-stroke是一个复合属性,里面有两个参数:描边的尺寸 描边的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div {
text-align: center;
font-size: 60px;
height: 500px;
line-height: 500px;
-webkit-text-stroke: 1px red;
color: transparent;
}
</style>
</head>
<body>
<div>
text stroke
</div>
</body>
</html>
text-stroke可以拆分为
text-stroke-color
text-stroke-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div {
text-align: center;
font-size: 60px;
height: 500px;
line-height: 500px;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1px;
color: transparent;
}
</style>
</head>
<body>
<div>
text stroke
</div>
</body>
</html>
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!