在生活中有很多美好的事情,但也有一些不如人意的事,同样在我们前端也一样.就举一个简单的列子:如果你在设置css样式的时候你想设置一个底边框为1px的线条就会写(

border-bottom: solid 1px #000),你看到的结果真的是1px吗?错了,这个时候计算机会很大方的给你2px,解决方法如下(我们利用伪类,定位和缩放来实现)

第一种方法:首先给父元素来个position:relative;接着写伪类

　　

.item::after{                content:'';                display: block;                width: 100%;                /* 设置盒子高1px (实际上是2px)*/                height: 1px;                /* 实际上border-bottom的高度为2px */                border-bottom: 1px solid #000;                background: transparent;                left:0;                /* 将盒子1px的高度隐藏掉 */                bottom:-1px;                /* 将border-bottom高度缩放一半 */                transform:scaleY(0.5);            }

 第二种方法:我们直接给整个页面进行缩放(实际上为两像素的物体我们缩放一半是不是就是只有1px了)