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データベースで外部キー制約を使用する必要があるかどうかの詳細な説明
推薦する
vue3.0 のウォッチ リスナーの例の詳細な説明
目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...
Vueでaxiosを簡単にカプセル化する方法
Vueにaxiosを挿入する 'axios' から axios をインポートします。...
HTML チュートリアル: title 属性と alt 属性
XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視...
MySQL がタイムスタンプを使用するときにタイムゾーンの問題を無視できるのはなぜですか?
私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...
Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析
Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...
スネークゲームのアイデアを実現するためのJavaScript
JavaScriptゲームSnakeの実装アイデア（完全なコード実装）を参考までに説明します。具体...
jsのイベントオブジェクトを深く理解しましょう
JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...
JavaScript における継承の 3 つの方法
継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...
Tomcat が https アクセスをサポートするための手順の説明
tomcat を https アクセスに対応させる方法ステップ： （1）キーストアファイルを生成する...
webpack と rollup を使用してコンポーネント ライブラリをパッケージ化する方法
序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...
React Hooksを使用する際のよくある落とし穴
React Hooks は React 16.8 で導入された新しい機能で、クラスを使用せずに状態や...
ノードスクリプトで自動サインインと抽選機能を実現
目次1. はじめに2. 準備3. スクリプトプロジェクトの構築4. コードの作成と実行5. まとめと...
MySQL InnoDB インデックス拡張の詳細な説明
インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...
CSS はコンテナ レベル (div...) タグを 1 つの位置 (ページの右端) に固定します。
コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...
MySQL 接続失敗の一般的な障害と原因
==================================================...