css渐变实现2色虚线边框

Question

关于如何使用渐变在 css 中实现自定义边框以看起来与下图完全一样的任何想法

Answer 1

渐变结合蒙版可以做到:

.box {
  width: 300px;
  height: 200px;
  position: relative;
}
.box:before {
  content:"";
  position: absolute;
  inset:0;
  padding: 4px; /* the border thickness */
  background: 
   repeating-conic-gradient(pink 0 25%,blue 0 50%) /* update the colors here */
   0 0/30px 20px round; /* update the size here (30px = width, 20px = height) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

<div class="box"></div>