html边框1像素怎么实现,CSS实现半像素边框的方法

1.直接用transform

transform：scale(0.5,0.5);

border:1px solid #fff;

这种方法会将元素的设定的固定高度和宽度也缩为一半，margin也是

我们在浏览器中看到的是宽高是一半，但是他的实际宽高还是固定的值，

所以不推荐。

2.利用伪元素：before

Login

.button2{

position: absolute; //只要不是static就行

width: 100px;

height: 50px;

color: #fff;

line-height: 50px;

text-align: center;

border-radius: 10px;

letter-spacing: 0.1em;

}

.button2:before{

content: '';

position: absolute; //必需

left: 0; //必需

width: 200%; //必需

height: 200%; //必需

border: 1px solid #fff; //必需

transform-origin: 0 0; //必需

transform: scale(0.5,0.5); //必需

box-sizing: border-box; //必需

border-radius: 20px;

}

这种方法也有缺陷，比如要为按钮设置圆角，在伪元素中设置的必须为元素的2倍，而且两者都需要设置。元素表现的宽和实际的宽是一致的。