CSS3 で半ピクセルのボーダーを実装

一、考え方

通常の 1px 黒色実線ボーダー：

border: 1px solid #000;

半ピクセルボーダーはもちろん 1px を 0.5px に変更するだけではない（テストしていないが、1 または 0 として解析される可能性がある）。border-width の値は自然数のみ可能

同様に、outline, box-shadow なども 0.5px の細い線を描画できない

通常の考え方は実現不可能なので、疑似要素 + スケールを使用して巧妙に実装できる。具体的な手順は以下の通り：

0. 目標要素を位置決め参照として設定

   .thinner-border {
       position: relative; /* デフォルト値 static でなければ OK */
   }
   

1. 目標要素に before または after 疑似要素を追加し、絶対位置決めを設定

   .thinner-border:before {
       content: '';
       position: absolute;
   }
   

2. 疑似要素に 1px のボーダーを追加

   border: 1px solid red;
   

3. 疑似要素の幅と高さを目標要素の 2 倍に設定

   width: 200%;
   height: 200%;
   

4. 0.5 倍に縮小（目標要素のサイズに戻る）

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

5. ボーダーを含める

   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 ピクセルボーダー、inline 半ピクセルボーダー、inline-block 半ピクセルボーダー、inline、ボーダーが狭すぎる

ボーダー効果はモバイルブラウザで見た方がより明確。変化するのは線の幅であって色ではない

注意： 理論的にはボーダーは任意に細くできる（1/n px）が、精度の問題（精度がボーダーの幅と高さに影響）が存在するため、半ピクセルボーダーが最も実用的な意義を持つ。ただし問題も存在：幅と高さが奇数の場合、ボーダーの位置が 0.5px ずれる。実際の応用では許容範囲