グラデーション付き丸みのある点線の境界

Question

CSS3のグラデーションで丸みを帯びた点線の境界線を作る方法は？唯一の勾配と点線の境界線を持つ境界線が見つかりました。これは私が実装する必要があります：

Answer 1

ボーダーゾーンのみをカバーするグラデーションイメージの上に白い点線の境界線を設定できます。それはあなたが、この代わりに、CSSのためにSVGを使ったほうが良いでしょうあなたの要求

.test { 
 
    width: 300px; 
 
    height: 80px; 
 
    margin: 10px; 
 
    border: dotted 10px white; 
 
    border-radius: 50px; 
 
    background-image: linear-gradient(white, white), linear-gradient(blue, magenta); 
 
    background-origin: border-box; 
 
    background-clip: content-box, border-box; 
 
}

<div class="test"></div>

Answer 2

これは簡単にCSS3で行うことができます。

<div class="greeting">Hello&Welcome</div> 

と、対応するCSS：

.greeting{ 
     width:150px; 
     height:100px; 
     background-color:cyan; 
     line-height:100px; 
     color :white; 
     text-align:center; 
     border: 2px dotted black; 
     border-radius:20px; 
} 

codepenでコードを見つけてください： https://codepen.io/Debabrata89/pen/VadLMM

・ホープ、このことができます。