在保持圆形状（css）的同时使圆形大

Question

所以我在html和css中有一个圆圈，看起来当我把它做得太大时，它开始成为一个奇怪的blob。 我怎么能把它变大，但仍然像形状一样保留圆圈？

谢谢！

这是jsfiddle： http://jsfiddle.net/aritro33/bUqNA/

这是HTML：

<div id = "circle"></div>

这是CSS：

#circle{
    height: 300px;
    width: 300px;
    background-color: red;
    border-radius: 100px;
}

Answer 1

使用border-radius ad 50％。如果你想要一个更大的圆，那么增加div的宽度和高度（以像素为单位）。但请确保宽度和高度相同。它应该总是方形的

Answer 2

将border-radius更改为150px

#circle{
    height: 300px;
    width: 300px;
    background-color: red;
    border-radius: 150px;
}

半径应该是宽度或高度的一半。高度和宽度都应该相等

FIDDLE

否则你可以将border-radius设为50％，边界半径与元素宽度直接相关。

#circle{
    height: 300px;
    width: 300px;
    background-color: red;
    border-radius: 50%;
}

FIDDLE