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" />