带渐变的圆角虚线边框

Question

如何在CSS3中使用渐变制作圆角虚线边框？我发现只有渐变和虚线边框的边框。这是我必须实现的：

Answer 1

您可以在仅覆盖边框区域的渐变图像顶部设置白色虚线边框。看起来像你的要求

.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

希望这有帮助。