有几种方法能实现0.5px边框:
做移动端开发的时候,如果边框直接设置 1px的宽度,可能视觉上还是太粗无法满足设计师的要求。下面是实现0.5px边框的几种方案。推荐方案4,复杂度中等,扩展性良好,兼容性好。
<div class="box box1"> 1px 边框,作为对比 </div> <div class="box box2"> 方案1: 直接设置0.5px边框</div> <div class="box box3"> 方案2: 设置0.5px阴影扩散半径 </div> <div class="box box4"> 方案3: 使用背景渐变实现1px背景的一半</div> <div class="box box5"> 方案4: 伪元素2倍尺寸1px边框scale缩小一半</div> <style> .box { width: 200px; height: 50px; border-radius: 10px; margin-top: 10px; } .box1 { border: 1px solid #000; } .box2 { border: 0.5px solid #000; } .box3 { box-shadow: 0px 0px 0px 0.5px #000; } .box4 { position: relative; } .box4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: linear-gradient(0deg, #000 50%, transparent 50%); } .box5 { position: relative; } .box5::after { position: absolute; bottom: 0; z-index: -1; width: 200%; height: 200%; content: ""; display: block; border: 1px solid #000; border-radius: 10px; transform: scale(0.5); transform-origin: left bottom; } </style>
v2-80230245d272421a9beb0e6086c575be_1440w.webp
查看代码动手测试。