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规范说：

框的背景（而不是边框图像）被裁剪为适当的曲线（由“ background-clip”确定）。剪切到边框或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须剪切到曲线。替换元素的内容始终会修剪到内容边缘曲线。另外，边界边缘曲线外的区域不代表该元素接受鼠标事件。

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

您可以使用radial-gradient背景图片。您可以使用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>

带边框图像的边框半径

2 个答案: