我试图将边框半径添加到我的 div 元素但不起作用

问题描述

我有一个 div 元素，我想应用 100 像素的边框半径，使其呈圆形。不幸的是，边框半径不适用于 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%);
}

解决方法

根据 W3C 规范：

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

因此，您可以尝试以下方法：

.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>