html - 如何将边框分成4等份？

Question

例如，我有一个矩形:

<div id="rec">
</div>

CSS:

#rec {
  width: 100px;
  height: 100px;
  background: black;
  border: solid;
  border-width: 3px;
  border-color: red;
}

JSFIDDLE: https://jsfiddle.net/tquq01hq/

我想将边框分成 4 个相等的部分，每个部分将采用不同的颜色。有什么建议吗？

Answer 1

划分border-color值border-color: red green blue grey;

#rec {
  width: 100px;
  height: 100px;
  background: black;
  border: solid;
  border-width: 3px;
  border-color: red green blue grey;
}

<强> DEMO