CSS - 以百分比表示的圆形 div 边框答案

【问题标题】：CSS - Rounded div border in percentCSS - 以百分比表示的圆形 div 边框
【发布时间】：2018-04-02 16:01:42
【问题描述】：

我有 this 舍入 div 元素，它使用百分比值作为它的尺寸。那么我想给这个元素添加一个边框，但是边框元素不能使用百分比！

我也尝试过为此目的使用填充，但它也不起作用，因为我无法使填充旋转！（它总是形成正方形或矩形）

你能帮我给我的圈子添加一个相对大小的边框吗？

我也不想使用vw 或使用全视图端口的此类值。我想要元素之间的相对性。

.circle {
border-radius: 50%;
border: 10px solid green; /*10px must be percent as it ruins my responsiveness*/
width: 20%;
height: 60%;
left: 40%;
position: absolute;
background-color: black;
}

 &lt;div class="circle"&gt;&lt;/div&gt;

【问题讨论】：

我看到一个带有绿色边框的黑色圆圈 - 你到底不能添加什么？
边框在px 值中，我想要它在% 值中！ @Mobby 运动
也许可以使用::after 和::before 之类的伪元素，但我做不到！
我不确定这是否可能，因为我不确定这意味着什么。一种折衷方案是使用 vw，但这会给它一个相对于视口的边框，而不是圆的大小。
边框属性不支持百分比 - w3.org/TR/CSS2/box.html#border-width-properties

标签： html css

【解决方案1】：

要达到预期效果，请使用带背景的外部 div，并使用百分比控制宽度、高度、填充

.out {
border-radius: 50%;
width: 20%;
height: 35%;
left: 40%;
position: absolute;
background-color: green;
padding:1%
}

.circle {
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
background-color: black;
}

<div class="out">
  <div class="circle">
  
   </div>
</div>

代码示例 - https://codepen.io/nagasai/pen/ZxoMRj

【讨论】：

【解决方案2】：

您可以使用径向渐变来伪造边框。它已经以百分比表示：

.test {
  margin: 10px;
  background-image: radial-gradient(lightgreen 60%, green 60%);
  border-radius: 50%;
  display: inline-block;
}

#test1 {
  height: 100px;
  width: 200px;
}

#test2 {
  height: 100px;
  width: 100px;
}
#test3 {
  height: 200px;
  width: 100px;
}

<div class="test" id="test1">
</div>
<div class="test" id="test2">
</div>
<div class="test" id="test3">
</div>

【讨论】：