使用 background-image 更精细地控制 CSS 边框

您可以使典型的 CSS border 虚线或点线。例如

.box {
   border: 1px dashed black;
   border: 3px dotted red;
}

您对虚线或间隙的大小或长度没有太多控制。而且您肯定无法使虚线倾斜、淡出或动画化！不过，您可以通过一些技巧来实现这些效果。

Amit Sheen 创建了这个非常棒的虚线边框生成器

诀窍是使用四个多重背景。background 属性接受逗号分隔的值，因此通过设置四个背景（顶部、右侧、底部和左侧各一个）并调整它们的大小使其看起来像边框，就可以实现所有这些控制。

所以就像

.box {
  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);
  background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}

我喜欢软糖。