CSSを使用して0.5ピクセルのボーダーを実装するサンプルコード

同社のデザイナーはデザイン画を作成する際、常にiPhone 6（幅は物理ピクセル750）をベースにデザインします。 iPhone 6 のデバイス ピクセル比 (物理ピクセルに対する CSS ピクセルの比) は 2 であるため、デザイナーが境界線 1 ピクセルのボックスをデザインすると、CSS コードに対して 0.5 ピクセルになります。

この問題については、CSS で境界線を直接 0.5px に設定するのが最も直感的です。テスト後、Android 上のほとんどすべてのブラウザーは 0.5 を境界なしの状態として認識します。このメソッドは機能しません

CSS3にはzoom属性があり、この属性を使用して1pxの境界線を50%縮小してこの機能を実現できます。具体的な実装コードは次のとおりです

<p class="border3">

    <p class="content">伪类设置的边框</p>

</p>

css:

。

.border3{

     position: relative;          

 }

 

.border3:before{

       content: '';

       position: absolute;

       width: 200%;

       height: 200%;

       border: 1px solid red;

       -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;

}

実装アイデア:

1. 対象要素の基準位置を設定します

2. 対象要素の前後に疑似要素を追加し、絶対位置を設定します

3.疑似要素

4. ボックスの使用 - sizing: border-box 属性で境界線を幅と高さにラップします

5. 幅と高さを 200% に設定します

6. ボックス モデル全体を 0.5 に縮小します

7. 左上隅をベンチマークのtransform-origin: 0 0;としてボックスモデルの位置を調整します

実装結果は以下のようにiPhoneに表示されます:

上記の内容はサンプルコードです。 CSS で 0.5 ピクセルの境界線を実装することが皆さんのお役に立てれば幸いです。

関連する推奨事項:

CSS を使用して複数列レイアウトを実装する方法

CSS を使用してはしご型のタブ ページを実装する方法

CSS で均等な分散を実現する 4 つの方法

以上がCSSを使用して0.5ピクセルのボーダーを実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。