带边界图像的边界半径

Question

在下面的代码中，我希望这两个div都是圆的。但第一个应用border-image的是正方形。我怎么才能把它修好，让它也变圆呢？

​

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>

​

Answer 1

不可能把它们结合起来。W3规范说：

一个盒子的背景，而不是它的边框图像，被剪裁到适当的曲线上(由“背景剪辑”决定)。其他剪辑到边框或填充边缘的效果(如“可见”以外的“溢出”)也必须剪辑到曲线上。被替换元素的内容总是被裁剪到内容边缘曲线。此外，边框边缘曲线外的区域不接受代表元素的鼠标事件。

但是，您可以通过使用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>

​

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>

​