CSSで0.5ピクセルの線を作る方法

今回はCSSで0.5ピクセルの線を作る方法を紹介します。 CSSで0.5ピクセルの線を作る際の注意点を実際に見てみましょう。

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

この問題に対して、最も直感的な方法は、CSS を使用して境界線を直接 0.5px に設定することです。テスト後、iPhone は 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. 疑似要素に 1px の境界線を追加します

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

6.

ボックス モデル

全体を 0.5 に縮小します

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

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

事例を読んで、方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

CSS3 でのポインターイベントの使用の詳細な説明

focus-within の使用の詳細な説明

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