使用CSS创建重复的水平和垂直虚线

Question

我已经尝试了几个例子，但没有从左侧和上方设置边距的运气。

enter image description here

Answer 1

可以通常创建通过嵌套两个重复线性渐变这种模式。请参阅Stripes in CSS用于制作带有渐变的条纹。

你从左到右做一个渐变，然后从上到下做一个渐变，最终的结果就像你图像中的一个网格。

div { 
 
    background-color: seagreen; 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 
div::after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    background: repeating-linear-gradient(to right, transparent, transparent 98px, white 100px, white 100px), repeating-linear-gradient(to bottom, transparent, transparent 98px, white 100px, white 100px);

<div></div>