在移動(dòng)端1像素的線是很丑的,而border-width設(shè)置為0.5px會(huì)被自動(dòng)轉(zhuǎn)成1px;
border-width只能為自然數(shù);類(lèi)似的屬性也不可以設(shè)置0.5;
可以用偽元素+縮放來(lái)實(shí)現(xiàn);
box{
position:relative; //先給元素設(shè)置定位,除了static都可以
}
.box1::before{
content: ''; //追加一個(gè)空
position: absolute; //設(shè)置定位
top: 0; //如果不設(shè)置可能會(huì)出現(xiàn)偏移
left: 0;
border: 1px solid #000; //設(shè)置邊框
width: 200%; //設(shè)置為插入元素的兩倍寬高
height: 200%;
transform-origin: 0 0; //設(shè)置元素的基點(diǎn)為0 0
transform: scale(0.5,0.5); //寬高縮小一半
box-sizing: border-box; //設(shè)置盒模型 這一步必須要有,否則邊框不會(huì)隨著一起縮放
}
大概思路:想元素放大2倍但是1像素的邊框仍是1像素,然后再縮放時(shí),邊框隨著一起縮放一半,就形成0.5像素邊框
