问

圈有两个边框

霙昉蘖976 发布于 2023-02-13 16:56

容器

css

我如何设置一个div带有两个边框的圆圈(a ),以便它对容器的尺寸作出反应？

假设这样的圆圈例如:

有2个边框的圆圈

这是一个圆形的工作CSS:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}







如何添加两种颜色的边框？我尝试过轮廓,但它是一个矩形.我试图在圆圈div中放置另一个div并使用背景颜色,但我无法垂直对齐内部div.



        
        3 个回答
        
                        
                我建议使用以下HTML:

<div></div>


CSS:

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}




div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

<div></div>


                
                    2023-02-13 16:59  回答
                       可怜小淖_135
                
            

                        
                在这个线程上已经有两个非常好的答案,但是这里有一些方法可以使这个线程更加完整,并采用所有可能的方法.这些产生的输出也是响应性的.

使用伪元素:

您可以使用尺寸小于父元素的伪元素,并将其绝对放置在父元素中.当背景添加到伪元素并且边框添加到父元素时,看起来边框和背景之间存在间隙.如果差距需要透明,那么我们不需要background在父级上添加任何内容.如果间隙需要是纯色(也就是说,它需要看起来像第二个边框),那么应该将该颜色和所需宽度的边框添加到伪元素中.

使用此方法时,内部区域也可以具有图像或渐变作为填充(背景).



.circle {
  position: relative;
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 50%;
  border: 2px solid brown;
}
.circle:after {
  position: absolute;
  content: '';
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  border-radius: inherit;
  background: brown;
  z-index: -1;
}
.circle.white:after {
  top: 0px;
  left: 0px;
  border: 4px solid white;
}
.circle.image:after {
  background: url(http://lorempixel.com/200/200/abstract/4);
}

/* Just for demo */

div {
  float: left;
  margin-right: 10px;
  transition: all 1s;
}
div:hover{
  height: 250px;
  width: 250px;
}
body {
  background: url(http://lorempixel.com/500/500/nature/3);
  background-size: cover;
}

<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
<div class='circle image'>Hello!</div>


                
                    2023-02-13 17:00  回答
                       平平安安55555_800
                
            

                        
                另一种方法是使用background-clip属性.它不会让你选择内在边框的颜色,但它会显示该间隙的背景:





div {
  width: 150px;
  height: 150px;
  padding:2px;
  border-radius: 50%;
  background: #DD4814;
  border: 2px solid #DD4814;
  background-clip: content-box;
  margin:0 auto;
}

/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}

<div></div>


                
                    2023-02-13 17:01  回答
                       一首老歌L_798
                
            

                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签