CSS实现0.5px

直接设置 border-width: 0.5px；使用方便，但兼容性很差，不推荐使用。用阴影代替边框，设置阴影box-shadow: 0 0 0 .5px #000; 使用方便，

1. 直接设置 border-width: 0.5px；使用方便，但兼容性很差，不推荐使用。
2. 用阴影代替边框，设置阴影box-shadow: 0 0 0 .5px #000; 使用方便，能正常展示圆角，兼容性一般。
3. 给容器设置伪元素，设置绝对定位，高度为1px，背景图为线性渐变，一半有颜色，一半透明。视觉上宽度只有0.5px。这种方法适合设置一条边框，没法展示圆角。
4. 给容器内设置伪元素，设置绝对定位，宽、高是200%，边框是1px，然后使用transform: scale(0.5) 让伪元素缩小原来的一半，这时候伪元素的边框和容器的边缘重合，视觉上宽度只有0.5px。这种方法兼容性最好，4个边框都能一次性设置，能正常展示圆角，推荐使用。

HTML:

<div class="box box0"></div>n<div class="box box1"></div>n<div class="box box2"></div>n<div class="box box3 box3-2 "></div>n<div class="box box3"></div>n<div class="box box4 box4-2"></div>n<div class="box box4"></div>

CSS:

.box {n width: 200px;n height: 50px;n border-radius: 10px;n margin-top: 10px;n}n.box0 {n border: 1px solid #000;n}nn.box1 {n border: 0.5px solid #000;n}nn.box2 {n box-shadow: 0px 0px 0px 0.5px #000;n}nn.box3 {n position: relative;n}n.box3::after {n content: "";n position: absolute;n left: 0;n bottom: 0;n width: 100%;n height: 1px;n background-image: linear-gradient(to bottom, transparent 50%, #000 50%);n}n.box3.box3-2::after {n background-image: linear-gradient(to bottom, #000 50%, #000 50%);n}nn.box4 {n position: relative;n}n.box4::after {n position: absolute;n bottom: 0;n width: 200%;n height: 200%;n content: "";n display: block;n border: 1px solid #000;n border-radius: 10px;n transform: scale(0.5);n transform-origin: left bottom;n}n.box4.box4-2::after {n width: 100%;n height: 100%;n transform: none;n}