如何使用CSS制作圆形背景？

Question

我需要做这样的事情。我希望在<div></div>

中width %进行此操作

我可以通过使用图片并在内部添加div和z-index来完成此操作。

但我想知道是否可以使用css在背景中制作这个圈子。

Answer 1

保持简单：

.circle
  {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
  }

宽度和高度可以是任何东西，只要它们相等

Answer 2

检查以下css。的 Demo

.circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

对于更多形状，您可以按照以下网址进行操作：

http://davidwalsh.name/css-triangles

Answer 3

可以使用border-radius属性来完成。基本上，你需要将border-radius设置为高度和宽度的一半，以获得一个圆圈。

JSFiddle

<强> HTML

<div id="container">
    <div id="inner">
    </div>
</div>

<强> 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%;
}

Answer 4

梯度？

div {
  width: 400px; height: 400px;
  background: radial-gradient(ellipse at center,  #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%);
}

https://fiddle.jshell.net/su5oyd4L/

Answer 5

您可以使用:before和:after伪类在元素上添加多层背景。

#divID : before {
    background: url(someImage);
}

#div : after {
    background : url(someotherImage) -10% no-repeat;
}

Answer 6

Here是使用带有CSS属性的单个div元素执行此操作的解决方案，border-radius具有魔力。

CSS：

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:#000
}

HTML：

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

Answer 7

如果你只想用1个元素做，你可以使用:: before和:: after伪元素代替相同的div而不是包装。
见http://css-tricks.com/pseudo-element-roundup/