javascript - 不使用边框的圆形边框-？

Question

我有一个带有如下边框的圆圈，如何在不使用的情况下在这个圆圈上设置边框border-right, left, top, bottom？我想添加一个边框，例如只为这个圆形边框的 10-20%

.circle {
    background-color:#fff;
    border-bottom:1px solid red;   
    border-radius: 100%; 
    height:100px;
    width:100px;
}

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

谢谢你的帮助

标签： javascripthtmlcss

Answer 1

如果要在圆圈的左右添加边框，我建议使用这种方式；你可以改变底部的像素

密码笔

.circle {
  background-color:#fff;
  border:1px solid red;   
  border-radius: 100%; 
  height:100px;
  width:100px;
  position:relative;
}
.circle::after{
  content:'';
  width:100px;
  height:100px;
  background-color:white;
  position:absolute;
  border-radius:50%;
  bottom:30px;
}