css - 如何创建多色边框？

Question

如何创建类似于下图的不均匀且多色的边框？

Answer 1

您可以使用伪元素 ::before 和 ::after 来实现:

.box {
  position: relative;
  background: #66d;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 6px solid #ddd;
}

.box::before, .box::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -6px; /* width of the border */
  border-radius: 50%;
  border: 6px solid transparent;
  content: '';
}

.box::before {
  border-top-color: #bbb;
  transform: rotate(45deg);   /* 45deg to start right on top */
}

.box::after {
  border-right-color: #bbb;   /* You can color the borders you want… */
  /* transform: rotate(0deg); /* … and adjust the rotation if needed */
}

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

请注意，如果需要，您可以使更多边框可见。

希望对您有所帮助。