带边框图像的边框半径

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

您可以使用 radial-gradient background-image. And you can mask it with mask-image。 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>

Answer 2

无法合并它们。 W3 规范说：

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

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

带边框图像的边框半径

border-radius with border-image

css

border

border-image