CSS で破線の境界線のストロークの長さと間隔を正確に制御するにはどうすればよいですか?

破線の境界線のストロークの長さと距離の制御

CSS には破線の境界線を作成するための border プロパティが用意されていますが、ストローク間の長さや距離を制御するためのカスタマイズ オプションがありません。この記事では、破線の境界線の外観をより詳細に制御するための代替方法について説明します。

border-image の使用

border-image プロパティを使用すると、画像をソースとして使用してカスタム境界線を作成できます。 border とは異なり、border-image では、破線間の長さや距離など、境界線コンポーネントのスタイルをより柔軟に設定できます。

画像の作成:

カスタム破線を作成するには境界線画像を作成するには、Photoshop などの画像エディタを使用する必要があります。画像の幅と高さは同じである必要があり、ストロークの長さとギャップはそれぞれ透明領域と不透明領域として表されます。

CSS での実装:

border-image: url("path_to_image.png") <border-image-width> <border-image-slice> <border-image-repeat>;

• border-image-width: 境界線の幅を制御しますimage.
• border-image-slice: ボーダーの上、右、下、左の辺の太さを指定します。
• border-image-repeat: パターンの繰り返し動作を定義します (例:均等に丸める

例:

.my-border {
  border-image: url("my_border_image.png") 2 round;
  border-style: dashed;
}

この例では、my_border_image.png 画像のストロークの長さは 2 ピクセル、ギャップは 5 ピクセルです。 。カスタム境界線を表示するには、境界線スタイルのプロパティが破線に設定されています。

ストロークの長さとギャップの調整

ストロークの長さとギャップを調整するには、それに応じて画像を変更します。たとえば、より広いギャップを作成するには、画像内の透明な領域を増やします。ストロークを長くするには、画像内の不透明な領域を減らします。

互換性

border-image は、IE 11 およびすべての主要なブラウザを含む最新のブラウザで十分にサポートされています。古いブラウザの場合は、互換性を確保するためにフォールバック境界線プロパティを追加できます。

以上がCSS で破線の境界線のストロークの長さと間隔を正確に制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。