对具有背景图像的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中文网其他相关文章！