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