使用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>