单独使用 css 画圆

小开

是的，画一个盒子，给它一个边界半径是盒子宽度的一半:

#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}

工作演示:

Http://jsfiddle.net/dsw9h/1/

#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}

<div id="circle"></div>

小开

最佳答案

可以将. before 用于包含圆(25CF)的 unicode 符号的内容。

.circle:before {
content: ' \25CF';
font-size: 200px;
}

<span class="circle"></span>

I suggest this as border-radius won't work in IE8 and below (I recognize the fact that the suggestion is a bit mental).

小开

是的. . 这是我的代码:

<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>

小开

边界半径是一个很好的选择，如果与旧的 IE 版本斗争，然后尝试 HTML 代码

&#8226;

并使用 css 来改变颜色。输出:

8226;

小开

这将在所有浏览器中工作

#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

小开

创建一个设置高度和宽度的 div (因此，对于圆，使用相同的高度和宽度) ，形成一个正方形
加一个 百分之五十的 border-radius，使其成圆形
然后你可以使用 background-color/渐变/(甚至是 pseudo elements)来创建类似这样的东西:

.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.sphere {
height: 200px;
width: 200px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
font-size: 500%;
position: relative;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
display: inline-block;
margin: 5%;
}
.sphere::after {
background-color: rgba(255, 255, 255, 0.3);
content: '';
height: 45%;
width: 12%;
position: absolute;
top: 4%;
left: 15%;
border-radius: 50%;
transform: rotate(40deg);
}

<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>