今天遇到一個需求,畫0.5px的線,查了以下資料,主要以scale方法為主。代碼如下:
/*0.5px上邊框*/ .half_top_border_before:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0.05rem; background-color: #ececec; transform: scaleY(0.5); transform-origin: center top; z-index: 2; }
利用after和before的話好像只能畫兩條線,如果要畫整個邊框可以先畫兩倍長寬的邊框在縮小到0.5。需要三條邊框的話可以考慮在容器內建立三個容器表示邊框線再縮小。