如何製作垂直徑向漸變

Question

目前我有虛線邊框線的標記，因爲border在製作實際的dotted邊框時非常糟糕。我的標記是以下

.dotted-line { 
 
    background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%); 
 
    background-repeat: repeat-x; 
 
    background-size: 6px 2px; 
 
    height: 9px; 
 
    width:100%; 
 
    margin: 20px 0 0 0; 
 
}

<div class="dotted-line"></div>

但是我遇到的問題是我希望能夠使同一類邊界，但垂直而非水平。我已經設置了background-repeat: repeat-x;，但是我只有一條實線。是否可以做一個垂直radial-gradient？

Answer 1

我玩弄了你的水平邊框，並得到了這個垂直虛線的邊框。看看background-repeat: repeat-y;，它現在是垂直的，並且background-size也發生了變化。

我改變了width和height得到一個體面的空間中發揮。

.dotted-line { 
 
    background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%); 
 
    background-repeat: repeat-y; 
 
    background-size: 2px 6px; 
 
    height: 100px; 
 
    width: 9px; 
 
    margin: 20px 0 0 0; 
 
}

<div class="dotted-line"></div>

Answer 2

喜歡這個？您忘記更改尺寸。對不起，如果這不是你問的。

.dotted-line { 
 
     background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%); 
 
     background-repeat: repeat-y; 
 
     background-size: 2px 6px; 
 
     height: 100vh; 
 
     width:10px; 
 
     margin: 20px 0 0 0; 
 
    }

<div class="dotted-line"></div>