当前位置:首页 > 移动开发 > 正文

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

2024-03-31 移动开发

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

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/yidong/11590.html