css怎么实现文字描边

申申呢？

已于 2023-10-11 14:15:53 修改

阅读量671

点赞数

文章标签： css 前端

于 2023-10-11 14:07:26 首次发布

本文链接：https://blog.csdn.net/qq_52181663/article/details/133768881

版权

有时，我们会遇到UI稿有文字描边的效果，比如下图的效果。
在这里插入图片描述
一、给需要描边的文字加一个id选择器
例如：

二、css写法：

                    number,
                     {
                        //这个是实现文字描边的关键，也就是‘空心文字’，这个是定义文字字符的描边的宽度和颜色。
                        -webkit-text-stroke: #f4f6f6 10px;
                        color: #276a84;
                        font-family: "FZLT";
                        &::before {
                            content: attr(id);
                            position: absolute;
                            -webkit-text-stroke: 1px;
                            color: #276a84;
                        }
                    }