Html 仅使用css绘制圆

是否可以仅使用css绘制圆圈，而css可以在大多数浏览器（如Mozilla、Safari）上使用？

是的，您可以使用border radius css属性。有关更多信息，请查看

是的，绘制一个框，并为其指定一个边框半径，该半径为框宽度的一半：

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

工作演示：

#圆圈{
背景：#f00；
宽度：200px；
高度：200px；
边界半径：50%；
}

---

您可以将.before与带有unicode符号的内容（25CF）一起使用

.circle:在{
内容：'\25CF'；
字体大小：200px；
}

是的。。这是我的密码：

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

.圆圈{
宽度：100px；
高度：100px；
边界半径：50%；
背景颜色：蓝色
}

边框半径是一个不错的选择，如果在使用旧IE版本时遇到困难，请尝试使用HTML代码

•

并使用css更改颜色。输出：

•

---

这将适用于所有浏览器

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

• 创建一个具有设置高度和宽度的div（因此，对于圆，使用相同的高度和宽度），形成一个正方形
• 添加一个

  边界半径
  为50%，使其呈圆形。（注意：a不需要前缀）

• 然后，您可以使用

  背景色

  /gradients/（甚至

  伪元素

  ）创建如下内容：

.red{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}
.球体{
高度：200px；
宽度：200px；
边界半径：50%；
文本对齐：居中；
垂直对齐：中间对齐；
字体大小：500%；
位置：相对位置；
盒影：插图-10px-10px 100px#000，10px 10px 20px黑色，插图0px 0px 10px黑色；
显示：内联块；
利润率：5%；
}
.sphere：：之后{
背景色：rgba（255、255、255、0.3）；
内容：''；
身高：45%；
宽度：12%；
位置：绝对位置；
最高：4%；
左：15%；
边界半径：50%；
变换：旋转（40度）；
}

此问题包含在

：before

中，在IE7及以下版本中不起作用，因此此方法仅获得IE8的支持，但很难正确定位圆。例如，字体大小200px不等于直径为200px的圆，在某些系统上会丢失抗锯齿功能。也许我们还可以设置

边距：-0.5em-0.3em-0.3em-0.1em

，考虑到目前IE 8已使用了近10年，这不再是公认的答案。放弃对它的支持是合情合理的，因为IE8目前的使用率为0.18%，大多数现代网站都是这样做的。border radius属性现在几乎得到了全面的支持（），因此应该是公认的答案。有没有办法安抚SEO之神，即使我使用圆形文本图像，而不是旋转每个字母？我使用的是IE8，而这个演示不起作用。它显示了一个红方块。IE8不支持边界半径，所以这是有意义的。。。不过，对于现代浏览器来说，这是个好主意，非常酷……与其支持IE8，不如问问你的客户你是否可以显示一条消息，告诉用户升级他们的浏览器。这将使每个人受益，微软推荐这样做。谷歌甚至在2012年底停止了其网络应用（Gmail、日历、硬盘、文档等）对IE8的支持。支持5年的浏览器是荒谬的。使用ie8的polyfille并使用边界半径：100%；对于响应性圆圈，使用垫底：40%；宽度：40%；身高：0；溢出：可见；如果圆真的很小，这就不好用了gradients@Atav32：谢谢！它实际上是使用多个框阴影完成的：）谢谢@degrade！我希望你的CSS之旅进展顺利：）我本来打算发一封愤怒的回复，说这和塔图的答案是一样的，但后来我点击了“运行代码”#micdropThank@NickG我很感激：）上面的链接不再有效。