CSS之webkit内核中的属性text-stroke

news2025/10/31 11:49:47

让我为大家介绍一下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>