如何使用 css 在 4 个部分中更改设置不同颜色的边框半径

Question

如何更改边框半径的颜色。

div {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  border: 1px red solid
}

Hello
<div>
</div>

我希望边框颜色的 25% 应该是红色，接下来的 25% 应该是蓝色，接下来的 25% 应该是绿色，最后是粉红色。

我该怎么做？

Answer 1

你期待吗？

div {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  border-top: 1px solid red;
  border-right: 1px solid blue;
  border-bottom: 1px solid green;
  border-left: 1px solid pink;
  transform: rotate(45deg)
}

<div></div>

Answer 2

您可以根据自己的目的使用渐变。 JSFiddle 万一你想用几种颜色分开一行。

gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;

.border-test {
  height: 100px;
  width: 100px;
  border-width: 3px;
  border-style: solid;
  -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
  -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
  -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
  border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

<div class="border-test"></div>

如果您只想给每条边着色，请使用上面显示的答案。

如果你需要硬边，我建议使用渐变生成器。

http://www.colorzilla.com/gradient-editor/

如何使用 css 在 4 个部分中更改设置不同颜色的边框半径

How to change set different color of border radius in 4 parts using css

css

border