css一像素问题

在生活中有很多美好的事情,但也有一些不如人意的事,同样在我们前端也一样.就举一个简单的列子:如果你在设置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了)

<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />

 

转载于:https://www.cnblogs.com/tc-jieke/p/9226431.html