css3实现0.5px边框

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css3实现0.5px边框</title><style>h5 {margin: 0;padding: 0;text-align: center;margin: 15px 0;}.group {display: flex;justify-content: center;align-items: center;}.item {width: 120px;height: 80px;background-color: rgba(238, 238, 238,.6);margin-right: 10px;box-sizing: border-box;}.item.top {border-top: 1px solid #e95325;}.item.right {border-right: 1px solid #e95325;}.item.bottom {border-bottom: 1px solid #e95325;}.item.left {border-left: 1px solid #e95325;}.item.all {border: 1px solid #e95325;}/* 0.5像素的 分割线 */.hairline,.hairline-top,.hairline-right,.hairline-bottom,.hairline-left {position: relative;}.hairline::after,.hairline-top::after,.hairline-right::after,.hairline-bottom::after,.hairline-left::after {position: absolute;top: -50%;right: -50%;bottom: -50%;left: -50%;content: " ";pointer-events: none;border: 0 solid #e95325;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transform: scale(0.5);-moz-transform: scale(0.5);transform: scale(0.5);}.hairline::after {border-width: 1px;}.hairline-top::after {border-top-width: 1px;}.hairline-right::after {border-right-width: 1px;}.hairline-bottom::after {border-bottom-width: 1px;}.hairline-left::after {border-left-width: 1px;}</style>
</head><body><h5>上边框</h5><div class="group"><div class="item hairline-top"></div><div class="item top"></div></div><h5>右边框</h5><div class="group"><div class="item hairline-right"></div><div class="item right"></div></div><h5>下边框</h5><div class="group"><div class="item hairline-bottom"></div><div class="item bottom"></div></div><h5>左边框</h5><div class="group"><div class="item hairline-left"></div><div class="item left"></div></div><h5>四边框</h5><div class="group"><div class="item hairline"></div><div class="item all"></div></div>
</body></html>