直接設置 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}