CSS 如何使用css制作圆形背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8709291/
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
How to make circular background using css?
提问by Jitendra Vyas
I need make something like this. and I want to do it for a <div></div>which has widthin %
我需要做这样的事情。我想这样做的<div></div>其中有width在%
I can do this by using an image and adding another divinside and z-index.
我可以通过使用图像并div在 和 中添加另一个图像来做到这一点z-index。
But I want to know if it's possible to make in this circle in backgroud using css.
但我想知道是否可以使用 css 在背景中制作这个圆圈。
回答by Gal Margalit
Keep it simple:
保持简单：
.circle
{
border-radius: 50%;
width: 200px;
height: 200px;
}
Width and height can be anything, as long as they're equal
宽度和高度可以是任何值，只要它们相等
回答by Swarnamayee Mallia
Check with following css. Demo
检查以下css。演示
.circle {
width: 140px;
height: 140px;
background: red;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
For more shapes you can follow following urls:
对于更多形状，您可以遵循以下网址：
回答by xbonez
It can be done using the border-radiusproperty. basically, you need to set the border-radius to exactly half of the height and width to get a circle.
可以使用该border-radius属性来完成。基本上，您需要将边框半径设置为高度和宽度的一半才能得到一个圆。
HTML
HTML
<div id="container">
<div id="inner">
</div>
</div>
CSS
CSS
#container
{
height:400px;
width:400px;
border:1px black solid;
}
#inner
{
height:200px;
width:200px;
background:black;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:25%;
margin-top:25%;
}
回答by Acn
You can use the :beforeand :afterpseudo-classes to put a multi-layered background on a element.
您可以使用:before和:after伪类在元素上放置多层背景。
#divID : before {
background: url(someImage);
}
#div : after {
background : url(someotherImage) -10% no-repeat;
}
回答by Remek Ambroziak
Gradients?
渐变？
div {
width: 400px; height: 400px;
background: radial-gradient(ellipse at center, #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%);
}
回答by Wrench
Hereis a solution for doing it with a single divelement with CSS properties, border-radiusdoes the magic.
这是使用div具有 CSS 属性的单个元素执行此操作的解决方案，这很border-radius神奇。
CSS:
CSS：
.circle{
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-align:center;
background:#000
}
HTML:
HTML：
<div class="circle">Hello</div>
回答by Mr Lister
If you want to do it with only 1 element, you can use the ::before and ::after pseudo elements for the same div instead of a wrapper.
See http://css-tricks.com/pseudo-element-roundup/
如果您只想使用 1 个元素来执行此操作，则可以对同一 div 使用 ::before 和 ::after 伪元素而不是包装器。
见http://css-tricks.com/pseudo-element-roundup/
