Css渐变实现2色虚线边框

Question

任何想法如何在css中使用渐变来实现自定义边框，看上去就像下面的图像

​

​

Answer 1

在实心边框上添加虚线边框。

​

body {
  background: #ccc;
}
div {
   width: 200px;
   height: 50px;
   border: 2px solid #fff;
   position: relative;
}
div::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed black;
    margin: -2px;
}

<div></div>

​

Answer 2

梯度与掩码相结合可以做到这一点：

​

.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>

​

Answer 3

您能在div中放置div吗?如：https://jsfiddle.net/sdfpe5w9/

<div class="outer">
    <div class="inner"></div>
</div>

body {
  background: #999;
}
.outer {
  background: white;
  border: 2px dashed #000;
  display: inline-block;
}
.inner {
  width: 200px;
  height: 100px;
  background: #999;
}