text-stroke详解

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

V。on

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

阅读量1.4k

点赞数 6

分类专栏： css 文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_40864647/article/details/137880220

版权

css 专栏收录该内容

33 篇文章

订阅专栏

text-stroke详解

属性定义及使用说明

text-stroke 属性是用来为文本添加描边效果的CSS属性，但请注意，它并非标准CSS属性，而是WebKit（如Safari和Chrome）浏览器专有的CSS扩展属性。为了兼容其他浏览器，通常会配合 -webkit-text-stroke 和 -moz-text-stroke 等私有前缀属性一起使用。

语法

-webkit-text-stroke: stroke-width color;
-moz-text-stroke: stroke-width color;

需要注意的是，使用-webkit-text-stroke会导致文本的渲染性能下降，特别是当文本内容非常多或者在移动设备上时，可能会影响到性能和体验。

属性	描述
stroke-width	规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。
color	描边的颜色，可以是任何有效的CSS颜色值，比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。

属性详解

stroke-width
规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。

<div class="container container1">1像素宽的红色描边</div>
<div class="container container2">0.06em的红色描边</div>

.container1 {
    -webkit-text-stroke: 1px red;
}
.container2 {
    -webkit-text-stroke: 0.06em red;
}

效果如下：
在这里插入图片描述

color
描边的颜色。可以是任何有效的CSS颜色值，比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。

.container1 {
    -webkit-text-stroke: 1px red;
}
.container2 {
    -webkit-text-stroke: 1px green;
}

在这里插入图片描述

镂空示例：
在这里插入图片描述
代码如下：

.container {
    font-size: 36px;
    color: transparent;
}
.container1 {
    -webkit-text-stroke: 1px red;
}