CSS はモバイル互換性の問題を解決するために 0.5px の線を実装します (推奨)

【コンテンツ】：

1.背景画像のグラデーションスタイルを使用する

2. スケールを使ってズームできる

3. 疑似要素の境界線を設定する

ここにコードスニペットを挿入します <!DOCTYPE html>
<html>
<ヘッド>
 <メタ文字セット="utf-8">
 <title>0.5px ラインの実装方法</title>
 <スタイル タイプ="text/css">
 /*標準の1px境界線*/
 .b1{
 高さ: 40px;
 境界線: 1px 実線 #ff0000;
 }
 /*1. グラデーション スタイル => を使用すると .5px を実現できます*/
 .a1{
 高さ: 1px;
 上マージン: 20px;
 背景画像: 線形グラデーション(0度、#f00 50%、透明 50%);
 }
 /*2. zoom-blur => を使用すると .5px を実現できます*/
 .a2{
 高さ: 1px;
 上マージン: 20px;
 背景色: #f00;
 -webkit-transform: スケールY(.5);
 変換:スケールY(.5);
 }
 /*3. 4 つの境界線すべてに必要なスタイル*/
 .スケール半分{
 上マージン: 20px;
 高さ: 100px;
 境界線:1px実線 #f00;
 -webkit-transform-origin: 0 0;
 変換の原点: 0 0;
 -webkit-transform: スケール(.5, .5);
 変換: スケール(.5, .5);
 }
 /*4. 疑似要素に境界線を追加する*/
 .border3{
 位置: 相対的;
 }
 .border3:前{
 コンテンツ： '';
 位置: 絶対;
 幅: 200%;
 高さ: 200%;
 境界線: 1px 青
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 -ms-変換の原点: 0 0;
 -o-変換の原点: 0 0;
 変換の原点: 0 0;
 -webkit-transform: スケール(.5, .5);
 -ms-transform:スケール(.5, .5);
 -o-変換: スケール(.5, .5);
 変換: スケール(.5, .5);
 -webkit-box-sizing: 境界線ボックス;
 -moz-box-sizing: 境界線ボックス;
 ボックスのサイズ: 境界線ボックス;
 }
 </スタイル>
</head>
<本文>
<div class="b1">通常の 1px 境界線</div>
<div class="a1"></div>
<div class="a2"></div>
<div class="scale-half"></div>
<div class="border3">
 <div class="content">疑似クラスで設定された境界線</div>
</div>
</本文>
</html>

CSS を使用して 0.5px の線を実装し、モバイル互換性の問題を解決する方法についての記事はこれで終わりです (推奨)。CSS を使用して 0.5px の線を実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: Vueウォッチの監視方法の概要

>>: MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明