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

最新推荐文章于 2025-01-01 11:38:52 发布

远近高低各不同

最新推荐文章于 2025-01-01 11:38:52 发布

阅读量843

点赞数 10

文章标签： css webkit 前端

本文链接：https://blog.csdn.net/m0_74577714/article/details/135875951

版权

本文介绍了如何使用CSS的text-stroke属性在HTML中实现文字描边效果，包括参数解释（颜色和宽度）以及一个示例代码来展示text-stroke-colour和text-stroke-width的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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