1

在下面的代码中，我希望两个 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>

4

2 回答 2

4

不可能将它们结合起来。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>

于 2020-05-27T20:38:41.253 回答
2

您可以使用径向渐变背景图像。你可以用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>

于 2020-05-27T20:34:26.660 回答