CSSで制御可能な点線を実装する方法

CSSで制御可能な点線を実装する方法

序文

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 クイック列追加の概要

推薦する

js での Object.create インスタンスの使用法の詳細な説明

1. Object.create() メソッドを使用して新しいオブジェクトを作成し、既存のオブジェク...

IE における条件付きコメントの利点と欠点

IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...

MySQL データ定義言語 DDL の基本ステートメント

MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...

Vue-CLI3.xはプロジェクトをサーバーに自動的にデプロイします

目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...

MySQLで重複行を削除する方法

SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...

MySql 認証に基づく vsftpd 仮想ユーザー

目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...

ウェブページのFOUC問題によるウェブページの混乱の解決策

FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...

MySQLリモート接続を有効にする方法

セキュリティ上の理由から、MySql-Server はローカル マシン (localhost、127...

HTML の doctype とエンコーディングに関する簡単な説明

文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...

HTMLフォーム入力監視の詳細な理解

今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...

要素動的ルーティングブレッドクラムの実装例

マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...

docker-maven-pluginプラグインは対応するjarパッケージを取得できません

docker-maven-plugin プラグインを使用する場合、Maven は対応する jar パ...

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

Vuexの役割についての深い理解

目次概要コンポーネント間でデータを共有する方法Vuex の原則の紹介Vuexはコンポーネントのグロー...

Nodejs での WeChat アプレット メッセージ プッシュの実装

サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...