当前位置: 首页 > 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;
                        }
                    }
http://www.dtcms.com/a/2279.html

相关文章:

  • 【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 网页
  • 国微FPGA培训
  • 云计算:常用系统前端与后端框架
  • 岛屿的数量
  • 【【萌新的SOC学习之AXI接口简介】】
  • thinkphp6 - 超详细使用阿里云短信服务发送验证码功能,TP框架调用对接阿里云短信发验证码(详细示例代码,一键复制开箱即用)
  • 第二证券:汽车产业链股活跃,恒勃股份、博俊科技“20cm”涨停
  • BS EN 12104-2023 软木地砖检测
  • Flutter环境搭建及新建项目
  • 【Git笔记】之Git重命名详解
  • 【OSPF宣告——network命令与多区域配置实验案例】