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

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

border css

-3

Mohammed Sabir · 技术社区 · 6 年前

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

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

Hello
<div>
</div>

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

我该怎么做?

2 回复 | 直到 6 年前

Paolo Forgia panoet 6 年前

你在期待这个吗?

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 6 年前

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前