有两个边框的圆圈答案

【问题标题】：Circle with two borders有两个边框的圆圈
【发布时间】：2013-12-16 19:42:17
【问题描述】：

如何响应式地设置带有两个边框的圆形 (div) 样式，以便它对容器的大小做出反应？

假设这样的圆圈例如：

这是一个用于圆圈的 CSS：

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

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

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

【问题讨论】：

您可以尝试使用边框和插入框阴影，但我不知道两个边框的任何 CSS 属性。你最好只在彼此内部有两个 div。

标签： css css-shapes

【解决方案1】：

我建议使用以下 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;
}

&lt;div&gt;&lt;/div&gt;

JS Fiddle demo.

box-shadow 给出最外层的颜色环，border 给出白色的“内边框”。

或者，您可以将box-shadow 与inset 关键字一起使用，并使用box-shadow 生成“内边框”并使用border 作为最外边框：

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

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

&lt;div&gt;&lt;/div&gt;

JS Fiddle demo.

显然，请根据自己的喜好和情况调整尺寸。

使用box-shadow 生成最外层边框，但是，允许使用多个边框（在以下示例中交替使用红色和白色）：

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

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

&lt;div&gt;&lt;/div&gt;

JS Fiddle demo.

【讨论】：

圆的解决方案有效，但没有在内部对齐文本。

【解决方案2】：

在这个线程上已经有两个非常好的答案，但是这里有更多的方法可以通过所有可能的方法使这个线程更加完整。这些产生的输出也是响应式的。

使用伪元素：

您可以使用尺寸小于父元素的伪元素并将其绝对定位在父元素中。当背景被添加到伪元素并且边框被添加到父元素时，看起来边框和背景之间存在间隙。如果间隙需要透明，那么我们不需要在父级上添加任何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>

使用径向渐变：

这也是一种可能的方法，但浏览器支持非常低，因此不推荐，但该想法可能在其他地方使用。基本上所做的是将radial-gradient（圆形）添加到元素中，以便在纯色背景颜色和实际边框之间留下透明或纯色间隙（额外边框）。

.circle{
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 50%;
  border: 2px solid brown;
  background: radial-gradient(circle at center, brown 66.5%, transparent 68%);
}
.circle.white{
  background: radial-gradient(circle at center, brown 66.5%, white 68%);
}

/* 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>

【讨论】：

【解决方案3】：

另一种方法是使用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;}

&lt;div&gt;&lt;/div&gt;

请注意，您使用填充值控制间隙大小。

【讨论】：

【解决方案4】：

这是一个小提琴，我画了一个带有边框和框阴影的圆来创建外圆效果https://jsfiddle.net/salientknight/k18fmepL/1/ 经过测试并在 Chrome、Safari 和 Opera 中运行——如果文本太大，则在 Firefox 中失败适用于大约 3 个字符的字体大小为 1em，然后高度和宽度不同步——将在具有固定大小高度和宽度的 FireFox 中运行。 .

<!-- Inside H1 -->
<h1><p class='circleBlue'>10000%</p></h1>
<!-- Regular -->
<p class='circleBlue'>10000%</p>


p.circleBlue{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #159fda;
 border: 5px Solid #fff;
  color: #fff;
  min-width: 1em;
  border-radius: 50%;
  vertical-align: middle;
  padding:20px;
   box-shadow: 0px -0px  0px 3px #159fda;
   -webkit-box-shadow: 0px -0px  0px 3px  #159fda;
 -moz-box-shadow: 0px -0px  0px 3px #159fda;
   margin:5px;
}

p.circle:before{
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}

update 我无法让它适用于各种文本大小和所有浏览器，所以我添加了一些 js。我将其粘贴在这里，因此它们是一个完整的解决方案。 changesSizes 是一个确保高度和宽度始终匹配的函数......首先检查哪个更大，然后将两者的值设置为两者中的较大者（是的，其中一个分配是多余的，但它让我安心） .最后的效果是我可以添加许多形状和大小的内容。我发现唯一真正的限制是味道。

   changeSizes(".circleBlue");
   //changeSizes(".circleGreen");
   //changeSizes(".circleOrange");

---------        

function changeSizes(cirlceColor){
    var circle = $(cirlceColor);
 circle.each(function(){
   var cw = $(this).width();
   var ch = $(this).height();

   if(cw>ch){
       $(this).width(cw);
       $(this).height(cw);  
   }else{
        $(this).width(ch);
       $(this).height(ch); 
   }
   });
}

Example:

【讨论】：