移动端,h5页面1px 1像素边框过粗解决方案

Posted uimeigui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端,h5页面1px 1像素边框过粗解决方案相关的知识,希望对你有一定的参考价值。

//h5有个小bug 1像素边框过粗,其实有个解决方案,就是利用伪元素:after,结合css3中的scale在y轴方向缩放0.5就行了

//父元素

//删除border-bottom,添加position:relative,伪元素定位用。
- border-bottom:1px solid yellow;
+ position:relative;
//为父元素添加:after伪类
:after {
                    content: ‘‘;
                    height: 1rpx;
                    background: $colorE3;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    transform: scaleY(0.5);
                }

//完美解决h5下 1px 边框过粗的问题,是不是很简单呀。

以上是关于移动端,h5页面1px 1像素边框过粗解决方案的主要内容,如果未能解决你的问题,请参考以下文章

移动端边框1像素的问题与解决方法

解决移动端1px边框问题的几种方法

移动端1px像素解决方式,从1px像素问题剖析像素及viewport

移动端 1px边框 问题

移动端1像素边框

移动端1像素边框问题