垂直放射状勾配を作成する方法

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;を設定しましたが、私はただ1つの実線を得ます。垂直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>