是否可以通過CSS製作小圓圈？

Question

而不是使用圖像，我想知道是否有人知道如何使用CSS製作帶輪廓的小圓圈。

我正在嘗試製作類似於靶心標誌或目標標誌的東西。

Answer 1

看一看這個庫： http://jsdraw2d.jsfiction.com/

對於畫圓有在http://jsdraw2d.jsfiction.com/demo/circleellipse.htm

Answer 2

您可以使用圓角的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 3

不知道我真正理解你的問題的例子，但是這是你如何畫一個圓，CSS：

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

    display: block; 
    border: 1px solid black; 

    border-radius: 100px; 
} 

Answer 4

對於任何想要繪製小圓圈的人，下面的代碼使用縮放來調整圓圈大小。只需調整規模值就可以了！

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

Plunkr