對具有背景圖像的CSS邊界的更多控制

標準CSS邊界為虛線或虛線樣式提供了有限的自定義。例如：

 。盒子 {
   邊界：1PX破壞了黑色；
   邊界：3px點紅色；
}

這種方法無法控制儀表板/間隙的長度，角度，褪色或動畫。但是，聰明的技術可以克服這些局限性。

阿米特·希恩（Amit Sheen）虛線的邊框發電機展示了一種強大的方法：使用四個多個背景。 background屬性接受逗號分隔的值。通過定義四個背景（頂部，右，底部，左，左），每個背景都被視為邊框，可以實現廣泛的控制。

例子：

 。盒子 {
  background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 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 0，100％0，0 100％;
  背景重複：無重複；
}

這可以解鎖以前沒有簡單邊框的先前無法使用的樣式選項。

以上是對具有背景圖像的CSS邊界的更多控制的詳細內容。更多資訊請關注PHP中文網其他相關文章！