我试图将边界半径添加到我的 div 元素但不工作 [重复]

Posted 2023-03-28

【中文标题】我试图将边界半径添加到我的 div 元素但不工作 [重复]

【英文标题】：I tried to add border-radius to my div element but not working [duplicate]

【发布时间】：2021-09-20 10:34:36

【问题描述】：

我有一个 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%);

【参考方案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>