移動端,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