是否可以通过 CSS 制作小圆圈？答案

【问题标题】：Is it possible to make small circles via CSS?是否可以通过 CSS 制作小圆圈？
【发布时间】：2011-09-05 12:45:27
【问题描述】：

我想知道是否有人知道如何使用 CSS 制作带有轮廓的小圆圈，而不是使用图像。

我正在尝试制作类似于靶心符号或目标徽标的东西。

【问题讨论】：

您的目标是哪个 HTML/CSS 标准？使用canvas 标签是相当直接的。（IIRC，Adobe Illustrator 将导出为可嵌入页面的格式）。
我认为我的答案正是您想要的：stackoverflow.com/questions/4840736/… - 如果不是，请告诉我。

【解决方案1】：

您可以使用带圆角的 div。

<style>
.circle{
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    border:1px solid #ccc;
    width:8px;
    height:8px;
}
</style>
<div class="circle"></div>

但是，也许，使用画布和 JavaScript 会更好。

【讨论】：

【解决方案2】：

对于其他想要绘制小圆圈的人，以下代码使用比例来调整圆圈的大小。只需更改比例值，您就可以开始了！

.circle{
    border: 2px solid #1111a1;
    padding: 10px 40px; 
    background: #dddddd;
    width: 1px;
    height: 60px;
    border-radius: 100px;
    transform: scale(0.5, 0.5);
}

Plunkr

【讨论】：

【解决方案3】：

不确定我是否真正理解了你的问题，但这就是你用 CSS 画圆的方式：

.circle
{
    height: 100px;
    width: 100px;

    display: block;
    border: 1px solid black;

    border-radius: 100px;
}

【讨论】：

【解决方案4】：

看看这个库： http://jsdraw2d.jsfiction.com/

http://jsdraw2d.jsfiction.com/demo/circleellipse.htm中有画圆的例子

【讨论】：

这个答案中链接的资源现在似乎已经死了。