CSSで0.5ピクセルのボーダーを実装する方法を詳しく解説

この記事では主に CSS による 0.5 ピクセルの境界線の実装を紹介します。詳細なコードはここにまとめられています。必要な友人はそれを参照してください。

同社のデザイナーはデザインを作成するときに iPhone6 (幅) を使用します。図面は 750 物理ピクセルに基づいて設計されています)。 iPhone 6 のデバイス ピクセル比 (物理ピクセルに対する CSS ピクセルの比) は 2 であるため、デザイナーが境界線 1 ピクセルのボックスをデザインすると、CSS コードに対して 0.5 ピクセルになります。

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

CSS3 にはスケーリング属性があり、この属性を使用して 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. 疑似要素に 1px の境界線を追加します。要素

4. box-sizing を使用します。border-box 属性は、幅と高さを 200% に設定します

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

7。ボックスモデルの位置を調整し、左上隅を基準に変形します。 -origin: 0 0;

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

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