序文 CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実現するために境界線が使用され、詳細な研究は行われていませんが、次の点線を生成するにはどうすればよいでしょうか。どうやってやるんですか? 実装 実装上、spanを複数使って小さな点、つまりspanを生成する人もいます。これは可能ですが、全体の状態変化がかなり面倒です。制御可能な点線を生成する方法はあるのでしょうか? 破線を生成する 水平線を生成する 破線を生成するには、通常、linear-gradient + background-size を使用します。実装コードは次のとおりです。 高さ: 2px; 背景: linear-gradient(右、#000000、#000000 7.5px、透明 7.5px、透明); 背景サイズ: 15px 100%; heightは破線の高さを制御し、linear-gradientとbackground-sizeは間隔とステップサイズを制御します。 垂直線を生成する 縦線と横線がちょうど逆なので、反転させるだけです。 幅: 2px; 背景: linear-gradient(下へ、#000000、#000000 7.5px、透明 7.5px、透明); 背景サイズ: 100% 15px; 伸ばす 水平線と垂直線の両方があるということは、プラス記号とマイナス記号があるということですか? CSSはプラスボタンとマイナスボタンを生成します .btn{ 表示: インラインブロック; 背景: #f0f0f0 繰り返しなし 中央; 境界線: 1px 実線 #d0d0d0; 幅: 24px; 高さ: 24px; 境界線の半径: 2px; ボックスの影: 0 1px rgba(100,100,100,.1); 色: #666; トランジション: color .2s、background-color .2s; } .btn:アクティブ{ ボックスシャドウ: インセット 0 1px rgba(100,100,100,.1); } .btn:ホバー{ 背景色: #e9e9e9; 色: #333; } .btn-プラス{ 背景画像: 線形グラデーション(上へ、現在の色、現在の色)、線形グラデーション(上へ、現在の色、現在の色); 背景サイズ: 10px 2px、2px 10px; } .btn-マイナス{ 背景画像: 線形グラデーション(上へ、現在の色、現在の色); 背景サイズ: 10px 2px; } <a href="javascript:" class="btn btn-plus" role="button" title="増加"></a> <入力値="1" サイズ="1"> <a href="javascript:" class="btn btn-minus" role="button" title="減らす"></a> 点線を生成 上記は生成された線ですが、角は丸くありません。小さな点を生成するにはどうすればよいでしょうか? 下記の通り 同様に、放射状グラデーションを使用して、 コードは次のとおりです。 高さ: 29px; 背景: 放射状グラデーション(#000000, #000000 4px, 透明 4px, 透明); 背景サイズ: 29px 100%; 注: ここでは、ドットの幅と高さは放射状グラデーションによって取得されます。高さが小さくなると、ドットは平らになり、以下に示すように楕円になります。 拡張機能 CSS3 グラデーションを使用すると、中空のダイアログ ボックスの三角形など、他の多くの効果を実現できます。 次のように: コードは次のとおりです。 幅: 6px; 高さ: 6px; 背景: 線形グラデーション(上へ、#ddd、#ddd) 繰り返しなし、線形グラデーション(右へ、#ddd、#ddd) 繰り返しなし、線形グラデーション(135 度、#fff、#fff 6 ピクセル、hsla(0,0%、100%、0) 6 ピクセル) 繰り返しなし; 背景サイズ: 6px 1px、1px 6px、6px 6px; 変換: 回転(-45度); この種の中空三角形は、グラデーションで実現すると非常に効果的です。実線の三角形の場合、境界線は間違いなく第一選択です。中空三角形は、birder2 エッジを使用して回転によって実現することもできますが、一定の制限があります。 要約する 上記は、CSS を使用して制御可能な点線を実現する方法についてご紹介しました。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: B2C ウェブサイトのユーザー エクスペリエンスの詳細設計リファレンス
>>: MySQL 8.0 オンライン DDL クイック列追加の概要
1. Object.create() メソッドを使用して新しいオブジェクトを作成し、既存のオブジェク...
IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...
MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...
目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...
SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...
目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...
FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...
セキュリティ上の理由から、MySql-Server はローカル マシン (localhost、127...
文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...
今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...
マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...
docker-maven-plugin プラグインを使用する場合、Maven は対応する jar パ...
この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...
目次概要コンポーネント間でデータを共有する方法Vuex の原則の紹介Vuexはコンポーネントのグロー...
サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...