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データベースで外部キー制約を使用する必要があるかどうかの詳細な説明
推薦する
CentOS に MySQL 5.5 をインストールするための完全な手順
目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...
MycliはMySQLコマンドライン愛好家にとって必須のツールです
マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...
ミニプログラム開発ツールのソースコードからの基本実装の分析
目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...
MySQLインデックスが失敗するいくつかの状況の詳細な分析
1. 先頭のあいまいクエリではインデックスを使用できません (「%XX」や「%XX%」など)コード値...
DIV と画像の水平および垂直の中央揃えは複数のブラウザと互換性があります
最初のタイプ: 完全な CSS コントロール、レイヤーフローティング (ログインページに適しています...
Win10 構成 Tomcat 環境変数チュートリアル図
設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...
Linuxプロセスネットワークトラフィック統計の実装プロセス
序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...
MySQLでカンマ区切り値の列を列に変換する方法
序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...
mysql charset=utf8 本当に意味が分かりますか
1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...
ホームページのデザインはウェブデザイナーのレベルを最もよく反映する
私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...
Ubuntu インストール時にブラックスクリーンが表示される場合の解決策 (3 種類)
私のコンピューターのグラフィック カードは Nvidia グラフィック カードです。再起動後、画面に...
他の人が私のウェブページを保存したり、サイトをコピーしたりするのを防ぐためのヒント
現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...
HTML 固定タイトル列、タイトル ヘッダー テーブル固有の実装コード
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
CSS を使用して複数列の等高レイアウトを設定する方法の例
最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各...
DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作
目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....