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 を応援していただければ幸いです。 |
>>: MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明
推薦する
Docker で MySQL マスターとスレーブをデプロイする方法
画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...
docker pull imageエラーの問題を解決する
説明する： Windows 10 に VM をインストールし、VM で Docker を実行し、Do...
innodb_autoinc_lock_mode の表現と値の選択方法についての簡単な説明
前提条件: Percona 5.6 バージョン、トランザクション分離レベルは RR mysql>...
Node はあいまい検索用の検索ボックスを実装します
この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...
HTMLウェブページテーブル構造化マークアップの応用に関する簡単な説明
Web テーブルの構造マークアップについて説明する前に、いくつかの画像を見てみましょう。 HTML ...
数十億のデータに対するMySQLページングの最適化に関する簡単な説明
目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...
Reactで例外を適切にキャプチャする方法
目次序文エラー境界エラー境界を超えてトライ/キャッチwindow.onerror、エラーイベント未処...
MySQLリモート接続権限の詳細な説明
1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...
Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)
昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...
新しいカーネルをLinuxシステムに移植する手順
1. ubuntu16.04 イメージと対応する ubuntu16.04 カーネル バージョンのソー...
ネイティブ JavaScript を使用して計算機のサンプル コードを開発する
計算機の主な機能は数値計算を実行することです。計算機機能の Web インスタンスを開発すると、js ...
JavaScriptはイベントリスナーをイベント委任にバッチで追加します。詳細なプロセス
1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべ...
HTMLウェブページの基本概念の簡単な分析
ウェブページとは何ですか? HTML ドキュメントがブラウザカーネルによってレンダリングされた後に表...
JavaScriptクロージャの原理と機能の詳細な説明
目次導入クロージャの使用カレー作りパブリック変数の実装キャッシュカプセル化（属性のプライベート化）閉...
Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル
1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...