CSS-圓角div邊框，以百分比為單位

Question

我有這個圓形的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; } 

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

Answer 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

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