当前位置: 首页 > news >正文

css怎么实现文字描边

有时,我们会遇到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;
                        }
                    }

相关文章:

  • 【18】c++设计模式——>适配器模式
  • 力扣刷题 day40:10-10
  • uniapp微信小程序之分包异步化之组件分包
  • 17. 电话号码的字母组合
  • 深度学习DAY3:激活函数
  • 【RabbitMQ 实战】09 客户端连接集群生产和消费消息
  • Java架构师缓存架构设计解决方案
  • 小米、华为、iPhone、OPPO、vivo如何在手机让几张图拼成一张?
  • Qt开发学习笔记02
  • 面试之并查集
  • Ajax跨域访问,访问成功但一直走error不走success的的问题解决
  • 学习记忆——数学篇——案例——代数——方程——一元二次方程
  • 文生图3.0:添加背景图片 3个回车```文生图```
  • 京东数据分析平台:2023年8月京东奶粉行业品牌销售排行榜
  • Qt实现 图片处理器PictureEdit
  • Kafka日志索引详解以及生产常见问题分析与总结
  • AdaBoost(上):数据分析 | 数据挖掘 | 十大算法之一
  • 参与现场问题解决总结(Kafka、Hbase)
  • Hibernate验证用户提交对象信息
  • Typescript 综合笔记:解读一个github中的React 网页
  • 习近平圆满结束对俄罗斯国事访问并出席纪念苏联伟大卫国战争胜利80周年庆典
  • 东方红资管官宣:41岁原国信资管董事长成飞出任新总经理
  • 数说母亲节|妈妈的妈妈带娃比例提升,托举效果如何?
  • 人民日报评“组团退演出服”:市场经济诚信原则需全社会维护
  • 晶圆销量上升,中芯国际一季度营收增长近三成,净利增超1.6倍
  • 顾家家居:拟定增募资近20亿元,用于家居产品生产线的改造和扩建等