这里是一个演示:http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

要在IE8及更老版本中使用此功能，必须下载并使用CSS3 PIE。我上面的演示不能在IE8中运行，但这只是因为jsFiddle不支持PIE.htc。

我的演示是这样的:

我有4个解决方案来完成这个任务:

这个特性 clip-path 伪元素 径向渐变

#circle1 { background-color: #B90136; width: 100px; height: 100px; border-radius: 50px;/* specify the radius */ } #circle2 { background-color: #B90136; width: 100px;/* specify the radius */ height: 100px;/* specify the radius */ clip-path: circle(); } #circle3::before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50px;/* specify the radius */ background-color: #B90136; } #circle4 { background-image: radial-gradient(#B90136 70%, transparent 30%); height: 100px;/* specify the radius */ width: 100px;/* specify the radius */ } <h3>1 border-radius</h3> <div id="circle1"></div> <hr/> <h3>2 clip-path</h3> <div id="circle2"></div> <hr/> <h3>3 pseudo element</h3> <div id="circle3"></div> <hr/> <h3>4 radial-gradient</h3> <div id="circle4"></div>

添加css属性:

这个特性:50%;

对任何div都是圆形的。

使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。

你可以试试径向渐变CSS函数:

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

应用到一个div图层:

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

将元素每边的边框半径设置为50%将创建任意大小的圆形显示:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}