CSS で破線の境界線のストロークの長さと間隔をカスタマイズするにはどうすればよいですか?

CSS での破線の境界線のストロークの長さと間隔のカスタマイズ

ネイティブの境界線プロパティの制限

CSS のネイティブの境界線プロパティでは、破線の境界線に対する制御が制限されています。ストロークの長さと間隔を調整する機能。

のご紹介border-image

柔軟性を高めるには、border-image プロパティの機能を利用します。この手法では、画像を使用して破線の境界線をシミュレートし、その外観をきめ細かく制御できます。

ステップバイステップ ガイド

1. 画像の作成: デザインと目的のストローク パターンを表す画像をエクスポートします。背景表示を可能にする透明性を確保します。画像内の幅とギャップを調整してストロークのプロパティを制御します。

2. CSS セットアップ:

   • Set border-image-source: 手順で作成した画像のURLを指定します1.
   • オプション: border-image-width: 境界線の幅をピクセル、パーセント、またはストローク幅の倍数で定義します (デフォルト: 1)。
   • Set border-image-slice: として使用される画像の 4 つの辺の厚さを定義します。 border.
   • Set border-image-repeat: 画像の繰り返し方法 (丸める、繰り返すなど) を指定します。

完全な例

.bordered {
  border: dashed 4px #000; /* Fallback for non-supporting browsers */
  border-style: dashed;
  border-image: url("https://i.sstatic.net/wLdVc.png") 2 round;
}

ギャップとストロークの制御長さ

ギャップとストロークの長さを変更するには、Photoshop または同様のツールで画像を編集し、その中のギャップとストロークの幅を調整します。ギャップが広い場合は、ギャップがより大きい画像を作成します。

ブラウザの互換性

border-image は最新のブラウザ (IE 11 以降) で十分にサポートされており、ブラウザ間で一貫した外観を提供します。 .

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