边框图片下的边框半径

Question

在以下代码中，我希望两个 div 的形状都是圆形。但是应用了 border-image 的第一个 div 是正方形的。如何解决这个问题并使它也变为圆形？

div {
  float: left;
  width: 130px;
  height: 130px;
  margin: auto;
  
  border: 30px solid transparent;
  border-radius: 50%;
  border-image: linear-gradient(45deg, red, blue) 30;
}

div + div {
  margin-left: 1em;
  border-image: none;
  border-color: green;
}

<div></div>
<div></div>

- Qwertiy

---

如果需要，这是一个带虚线边框的相关链接：https://dev59.com/p1IH5IYBdhLWcg3wNayz#60586691 - Temani Afif

Answer 1

无法将它们结合起来。W3规范表示：

一个盒子的背景会被裁剪成适当的曲线（由“background-clip”确定），但不包括其边框图像。其他被裁剪到边框或填充边缘的效果（例如“overflow”除了“visible”之外）也必须裁剪到曲线。替换元素的内容始终被修剪到内容边缘曲线上。此外，边框边缘曲线外的区域不会代表该元素接收鼠标事件。

但是，您可以通过使用多个元素和CSS渐变来实现相同的效果。

#cont{
  background: -webkit-linear-gradient(left top, crimson 0%, blue 100%);
  width: 300px;
  height: 300px;
  border-radius: 1000px;
  padding: 10px;
}

#box{
  background: white;
  width: 300px;
  height: 300px;
  border-radius: 1000px;
}

<div id="cont">
  <div id="box"></div>
</div>

- Zach P.

---

如果你想要一个圆形，只需在 border-radius 中写入 50%，而不是用像素写入巨大的数字。 - NNL993

Answer 2

您可以使用径向渐变背景图片，并可以使用遮罩图片进行遮罩。但是border-image与border-radius不兼容。

div {
  float: left;
  width: 190px;
  height: 190px;
  margin: auto;
  /* border: 30px solid transparent;
     border-radius: 50%;
    border-image: linear-gradient(45deg, red, blue) 30;*/
  border-radius: 50%;
  background: linear-gradient(45deg, red, blue);
  -webkit-mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
          mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
}

div+div {
  margin-left: 1em;
  border-image: none;
  border-color: green;
}

<div></div>
<div></div>

- doğukan

---

你可以删除“at 50% 50%”，因为它已经是默认值了。 - Temani Afif

@TemaniAfif 谢谢，我已经移除了。 - doğukan