带有边框图像的边框半径

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>