Question

我有https://gitlab.com/SumNeuron/multitags/pipelines四舍五入vw元素，它使用百分比值作为维度。然后我想为这个元素添加一个边框，但是不能使用百分比作为border元素！

我也尝试过使用padding来达到这个目的，但它也没有用，因为我无法使填充变得圆滑！（它总是形状为方形或矩形）

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

我也不想使用.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; }或使用全视图端口的值。我想要元素之间的相对性。

＆＃13;

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

＆＃13;

make:auth

＆＃13;

Answer 1

要获得预期的结果，请使用带有背景的外部div和控制宽度，高度，填充百分比

 public static void main(String[] args) {
// write your code here
    Scanner scanner=new Scanner(System.in);
    char c[];
    String s=scanner.nextLine();
    c=s.toCharArray();
    int n=0;
    int real=0;
    int temp=0;
    System.out.println(c.length);
    for(int i=(c.length-1);i>=0;i--)
    {
        temp=(int)Math.pow(2,i);
        n=c[i]*temp;
        System.out.println(c[i]+":"+(int)Math.pow(2,i)+":"+temp+":"+n);
        real=real+n;
        System.out.println(real);
    }
    System.out.println("hello , its me aditya and your value is "+ real);
}


1111
4
1:8:8:392
392
1:4:4:196
588
1:2:2:98
686
1:1:1:49
735
hello , its me aditya and your value is 735

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

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: