单独使用css绘制圆[重复]

Posted 2023-03-06

【中文标题】单独使用css绘制圆[重复]

【英文标题】：Draw Circle using css alone [duplicate]

【发布时间】：2011-10-19 16:49:25

【问题描述】：

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

【问题讨论】：

这个问题has been asked many times

这包含在How to make a circle around content using CSS?

【参考方案1】：

是的，画一个盒子并给它一个边框半径，它是盒子宽度的一半：

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

【讨论】：

我用的是IE8，这个demo不行。它显示一个红色方块。

IE8 不支持边框半径，所以这是有道理的...不过对于现代浏览器来说是个好主意，非常酷...

请询问您的客户是否可以显示一条消息告诉用户升级他们的浏览器，而不是支持 IE8。它将使每个人受益，微软推荐它。 Google 甚至在 2012 年底停止在其网络应用程序（Gmail、Calendar、Drive、Docs 等）中支持 IE8。支持 5 年历史的浏览器是荒谬的。

为 ie8 css3pie.com 使用 polyfille 并使用border-radius:100%;对于响应式圆圈，使用 padding-bottom:40%；宽度：40%；高度：0；溢出：可见；

如果圈子真的很小，这个就不好用了

【参考方案2】：

您可以将 .before 与带有 unicode 符号的内容一起用于圆 (25CF)。

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

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

我建议这样做，因为边界半径在 IE8 及以下版本中不起作用（我承认这个建议有点精神）。

【讨论】：

:before 在 IE7 及以下版本中不起作用，因此该方法仅获得对 IE8 的支持，但很难正确定位圆圈。例如，200 像素的字体大小不等于直径为 200 像素的圆，并且在某些系统上您会失去抗锯齿功能。

也许我们也可以设置margin: -0.5em -0.3em -0.3em -0.1em

鉴于此时 IE 8 已经有将近 10 年的历史，这应该不再是公认的答案。放弃对它的支持是合理的，因为根据caniuse.com/usage-table，IE 8 目前有 0.18% 的使用份额，大多数现代网站都这样做了。现在几乎全面支持border-radius 属性（caniuse.com/#search=border-radius），所以应该是公认的答案。

有没有办法安抚搜索引擎优化之神，即使我使用圆形文本的图像，而不是旋转每个字母？

【参考方案3】：

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

50%

的border-radius，这将使其呈圆形。 （注意：long time 不需要前缀） 然后您可以使用background-color/gradients/（甚至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>

【讨论】：

非常棒的渐变

@Atav32：谢谢！它实际上是使用多个盒子阴影完成的 :)

谢谢@degenerate！我希望你在你的 CSS 之旅中一切顺利:)

我正要发一条愤怒的回复，说这与 Tatu 的答案相同，但后来我点击了“运行代码”...。#micdrop

谢谢@NickG 我很感激 :)

【参考方案4】：

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

•

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

•

【参考方案5】：

这适用于所有浏览器

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

【参考方案6】：

是的..这是我的代码：

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