css 半像素
项目中需要用到 0.5px 的边框时,我们不能通过直接设置 border 为 0.5px ,这时候就需要 css3 的缩放来变通。
/* 定义目标元素的定位方式 */ .thinner,.thinner-top,.thinner-all{ position: relative; } /* 定义在底部的 border */ .thinner:after{ content: ''; display: block; position: absolute; bottom: 0; left:0; right: 0; width: 100%; height: 1px; border-bottom: 1px solid #dedede; transform-origin: 0 0; transform: scale(1, 0.5); } /* 定义在顶部的 border */ .thinner-top:before{ content: ''; display: block; position: absolute; top: 0; left:0; right: 0; width: 100%; height: 1px; border-top: 1px solid #dedede; transform-origin: 0 0; transform: scale(1, 0.5); } /* 定义包裹的 border */ .thinner-all:before{ content: ''; display: block; position: absolute; width: 200%; height: 200%; border: 1px solid #dedede; transform-origin: 0 0; transform: scale(0.5, 0.5); z-index: -1; }
使用如下:
<div class="container"> <div class='thinner'> <p>文本000</p> </div> <br> <br> <div class='thinner-top'> <p>文本111</p> </div> <br> <br> <div class='thinner-all'> <p>文本222</p> </div> </div>
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 我在厂里搞 wine 的日子
· 如何通过向量化技术比较两段文本是否相似?
· 35+程序员的转型之路:经济寒冬中的希望与策略
· JavaScript中如何遍历对象?
· 领域模型应用
· 独立开发,这条路可行吗?
· Java简历、面试、试用期、转正
· C#源生成器:让你的代码飞起来的黑科技
· SpringBoot3 + LangChain4j + Redis 实现大模型多轮对话及工具调用
· Java开发AI项目,太爽了!LangChain4j保姆级教程