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);
}

Plunkr

Answer 4

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

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

中有一些示例

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

4 个答案: