点線の CSS 枠線のドットの間隔を制御するにはどうすればよいですか?

点線の境界線のドット間隔の制御

点線の境界線のドット間の間隔を広げるには、グラデーション手法の使用を検討してください。このメソッドは、水平方向と垂直方向の境界線の両方に適用されます。

水平方向の境界線:

• 背景画像を、比率を指定するパーセンテージ値で線形グラデーションに設定します。ドットが占めるライン、その後に透明度を 0% に設定します。
• 背景サイズを調整してドット サイズと境界線の下部にグラデーションを配置する背景位置。

垂直境界線:

• 上記と同じ線形グラデーション手法を使用しますが、変更します。背景の位置を「右」にします。

例コード:

/* Horizontal */
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/* Vertical */
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

線形グラデーションのパーセンテージを調整することで、ドットと間隔の比率を制御できます。ドット サイズは、background-size プロパティによって決まります。

注: この手法では、複数の背景画像を利用することで、複数の点線の境界線を使用できます。

以上が点線の CSS 枠線のドットの間隔を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。