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

Question

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

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

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

但是,可能是,最好使用canvas和JavaScript.

Answer 2

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

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

    display: block;
    border: 1px solid black;

    border-radius: 100px;
}

Answer 3

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

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

普朗克

Answer 4

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

对于绘制圆圈， http://jsdraw2d.jsfiction.com/demo/circleellipse.htm中有示例