.fa-circle { 颜色:番茄; ｝ div { 字体大小:100 px; ｝ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> < div > <我类=“fa fa-circle”aria-hidden = " true " > < / i > < / div >

只是想提到另一个解决方案，回答“更容易的方法创建圆div比使用图像?”这是使用FontAwesome。

你导入fontawesome css文件或从这里的CDN

然后你就:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

你可以给它任意颜色任意字体大小。

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

对于circle，创建一个div元素，然后输入width = 2倍的边框半径= 2倍的填充。同样line-height = 0 例如，用50px作为圆的半径，下面的代码工作得很好:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;

你可以使用半径，但它不会工作在IE: border-radius: 5px 5px;。

我有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函数:

.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>