CSS 有两个边框的圆圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20305594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Circle with two borders
提问by jjei
How can I style a a circle (a div) with two borders responsively so that it reacts to a container's size?
如何div响应地设置带有两个边框的圆形 (a ) 的样式，以便它对容器的大小做出反应？
Suppose circles like this for example:
假设这样的圆圈例如：
Here is a working CSS for a circle:
这是一个圆的有效 CSS：
div.circle {
width: 90%;
height: 0;
padding-bottom: 90%;
margin: auto;
float: none;
border-radius: 50%;
border: 1px solid green;
background: pink;
}<div class="circle"></div>How can I add a border with two colors? I tried outline but it came out as a rectangle. I tried to place another div inside the circle div and use background color but I can't align the inner div vertically.
如何添加两种颜色的边框？我试过轮廓，但它是一个矩形。我试图在圆形 div 内放置另一个 div 并使用背景颜色，但我无法垂直对齐内部 div。
回答by David says reinstate Monica
I'd suggest, with the following HTML:
我建议使用以下 HTML：
<div></div>
The CSS:
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>The box-shadowgives the outermost ring of colour, the bordergives the white 'inner-border'.
所述box-shadow赋予颜色的最外环，所述border给出了白色“内边界”。
Alternatively, you can use a box-shadowwith the insetkeyword, and use the box-shadowto generate the 'inner-border' and use the borderas the outermost border:
或者，您可以将 abox-shadow与inset关键字一起使用，并使用 thebox-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;
}<div></div>Obviously, adjust the dimensions to your own taste and circumstances.
显然，根据您自己的口味和情况调整尺寸。
Using the box-shadowto generate the outermost border, however, allows for multiple borders (alternating red and white in the following example):
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;
}<div></div>回答by web-tiki
Another approach would be to use the background-clipproperty. It wont allow you to choose the color of the innner border but it will show the background in that gap:
另一种方法是使用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>Note that you control the gap size with the padding value.
请注意，您可以使用填充值控制间隙大小。
回答by Harry
There are already two very good answers on this thread but here are a couple of more approaches to make this thread more complete with all possible approaches. The output produced by these are also responsive.
在这个线程上已经有两个非常好的答案，但是这里有更多的方法可以使这个线程通过所有可能的方法变得更加完整。这些产生的输出也是响应性的。
Using a pseudo-element:
使用伪元素：
You can use a pseudo-element that is smaller in size than the parent and position it absolutely within the parent. When the background is added to the pseudo-element and a border is added to the parent it looks like there is a gap between the border and the background. If the gap needs to be transparent then we need not add any backgroundon the parent. If the gap needs to be of a solid color (that is, it needs to look like a second border) then a border of that color and required width should be added to the pseudo-element.
您可以使用尺寸小于父元素的伪元素并将其绝对定位在父元素中。当背景被添加到伪元素并且边框被添加到父元素时，看起来边框和背景之间存在间隙。如果间隙需要透明，那么我们不需要background在父级上添加任何内容。如果间隙需要是纯色的（也就是说，它需要看起来像第二个边框），那么应该向伪元素添加该颜色的边框和所需的宽度。
While using this approach, the inner area can also have image or a gradient as the fill (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>Using Radial Gradients:
使用径向渐变：
This is also a possible approach but has very low browser support and hence it is not recommended but the idea could be of use elsewhere. Essentially what is done is that a radial-gradient(circular shaped) is added to the element such that it leaves a transparent or a solid colored gap (extra border) between the solid background color and the actual border.
这也是一种可能的方法，但浏览器支持非常低，因此不推荐使用，但这个想法可以在其他地方使用。基本上所做的是将一个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>回答by Daniel Lefebvre
Here is a fiddle where I draw one circle with a border and box-shadow to create the outer circle effect https://jsfiddle.net/salientknight/k18fmepL/1/Tested and works in Chrome, Safari and Opera -- Fails in Firefox if text gets too large Good for about 3 characters font size 1em then height and width get out of sync -- will work in FireFox with a fixed size height and width...
这是一个小提琴，我画了一个带有边框和框阴影的圆圈来创建外圆效果 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%;
}
updateI could not get this to work with a variety of text sizes and in all browsers so I added some js. I'm pasting it here so their is one complete solution all together. changesSizes is a function that makes sure that height and width always match... first checking which is bigger and then setting the value of both to the larger of the two (yes one of these assignments is redundant but it gives me peace of mind). The final effect is that I can add content of many shapes and sizes. The only real limitation I have found is taste.
更新我无法在各种文本大小和所有浏览器中使用它，所以我添加了一些 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:
