css - 我试图将边界半径添加到我的 div 元素但不工作

Question

我有一个 div 元素，我想应用 100px 的边框半径，使其呈圆形。不幸的是，边界半径不适用于 div 元素。CSS 选择器如下所示：

  .battery-circle {
  border: 4px solid;
  border-image-slice: 1;
  border-radius: 30em;
  border-image-source: linear-gradient(to left, #743ad5, rgba(163,61,255,1) 84%);
}

Answer 1

根据 W3C 规范：

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

因此，作为一种解决方法，您可以尝试这样的事情：

.battery-circle {
  border: 4px solid transparent;
  border-image-slice: 1;
  border-radius: 30em;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to left, #743ad5, rgba(163,61,255,1) 84%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="battery-circle">test</div>