CSS3 實現半像素邊框

一。思路

普通的 1px 黑色實線邊框：

border: 1px solid #000;

半像素邊框當然不是簡單地把 1px 改為 0.5px（沒測試過，可能會被解析成 1 或者 0），border-width 的值只能是自然數

類似的，outline, box-shadow 等等也沒有辦法畫出 0.5px 的細線

常規思路是不可行的，我們可以用偽元素 + 縮放巧妙地實現，具體步驟如下：

設置目標元素作為定位參照

.thinner-border {
    position: relative; /* 只要不是默認值 static 即可 */
}

給目標元素添加一個偽元素 before 或者 after，並設置絕對定位
```
.thinner-border:before {
    content: '';
    position: absolute;
}
```
給偽元素添上 1px 的邊框
```
border: 1px solid red;
```
設置偽元素的寬高為目標元素的 2 倍
```
width: 200%;
height: 200%;
```

縮小 0.5 倍（變回目標元素的大小）

transform-origin: 0 0;
transform: scale(0.5, 0.5);

把 border 包進來
```
box-sizing: border-box;
```

簡言之就是先放大再縮回來，border-box 是關鍵，否則邊框不會一起縮放

二。具體實現

上面已經分步驟寫得很清楚了，拼在一起就是完整實現：

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

功能是給 class 值指定了 thinner-border 的block 和 inline-block 元素添上半像素的邊框，因為 inline 元素的 width 和 height 有一些限制，偽元素獲取到的 200% 要比實際值小，邊框的寬高也會比期望的小

三。Demo

.ib { display: inline-block; } .bx { display: block; } .bd { border: 1px solid #000; } .thinner-border { position: relative; } .thinner-border:before { content: ''; position: absolute; width: 200%; height: 200%; border: 1px solid #000; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .one-fourth:before{ width: 400%; height: 400%; -webkit-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); }

1 像素邊框，block

半像素邊框，block

1 像素邊框，inline 半像素邊框，inline-block 半像素邊框，inline，邊框太窄

1/4 像素邊框

邊框效果用移動瀏覽器看更明顯，變化的是線寬而不是顏色

*注意：*雖然理論上邊框可以任意細（1/n px），但由於存在精度的問題（精度影響邊框的寬高），所以半像素邊框是最有實用意義的，雖然也存在問題：如果寬高是奇數則邊框位置會偏移 0.5px，實際應用中尚可接受

一。思路

二。具體實現

三。Demo

評論

提交評論