代码之家 › 专栏 › 技术社区 › Mohammed Sabir

如何使用css更改4个部分中边界半径的不同颜色集

border css

-3

Mohammed Sabir · 技术社区 · 7 年前

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

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

Hello
<div>
</div>

我希望25%的边框颜色应该是红色,然后是蓝色,然后是绿色,最后是粉红色。

我该怎么做?

2 回复 | 直到 7 年前

Paolo Forgia panoet 7 年前

你在期待这个吗?

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>

-2

Rakowu 7 年前

您可以根据自己的目的使用渐变。 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%;
}