バックグラウンドイメージを使用したCSSの境界線のより多くの制御

標準のCSSボーダーは、破線または点線のスタイルのための限られたカスタマイズを提供します。例えば：

 。箱 {
   ボーダー：1pxダッシュブラック。
   国境：3px点線赤;
}

このアプローチには、ダッシュ/ギャップの長さ、角度、フェード、またはアニメーションの制御がありません。ただし、巧妙なテクニックはこれらの制限を克服できます。

Amit Sheenの破線のボーダージェネレーターは、4つの複数の背景を使用する強力な方法を示しています。 backgroundプロパティは、コンマ区切りの値を受け入れます。 4つの背景（上、右、下、左）を定義することにより、それぞれが境界としてスタイルされているため、広範なコントロールが達成されます。

例：

 。箱 {
  バックグラウンドイメージ：繰り返し線形勾配（0deg、＃333333、＃3333333 10px、透明な10px、透明な20px、＃333333 20px）、繰り返し線形勾配（90deg、＃333333、＃333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333レー関までありません。 20px), repeating-linear-gradient(180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px）;
  バックグラウンドサイズ：3px 100％、100％3px、3px 100％、100％3px;
  バックグラウンドポジション：0 0、0、100％0、0 100％;
  バックグラウンドリピート：ノーリピート。
}

これにより、以前は簡単な境界で使用できなかった高度なスタイリングオプションのロックが解除されます。

以上がバックグラウンドイメージを使用したCSSの境界線のより多くの制御の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。