移动端,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 边框过粗的问题,是不是很简单呀。

//当然,有时候也会遇到按钮边框使用border-radius的情况,可以将按钮的 :after伪类设为两倍大小,边框为1px ,然后使用transform:scale(0.5)就完美解决了,记得border-radius也要设为两倍大小

  //父元素添加

margin-bottom: -1rpx;
margin-right: 1rpx;

:after {
                                        content: '';
                                        width: 200%;
                                        height: 200%;
                        box-sizing: border-box; //去除border的边框 position: absolute; top:
0; left: 0; border: 1rpx solid red; border-radius: 100rpx; //2倍border-radius transform: scale(0.5, 0.5); -webkit-transform-origin: top left; }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM