如何制作一个圆形的div？

Question

我想创建一个背景颜色为红色且形状完全圆形的div，应该如何实现？

可以使用CSS或jQuery。

- Saswat

Answer 1

你可以做以下操作：

FIDDLE

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

CSS

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

其他形状 来源

- Richa

---

使用边框半径像素值制作圆形并不是一个好方法...应该使用border-radius:50%代替。 - undefinedtoken

Answer 2

通过使用50％的border-radius，您可以制作一个圆形。以下是一个示例：

CSS：

#exampleCircle{
    width: 500px;
    height: 500px;
    background: red;
    border-radius: 50%;
}

HTML:

<div id = "exampleCircle"></div>

- Nirvik Baruah

Answer 3

HTML div 元素与 SVG circle 基元不同，它们总是矩形的。

你可以使用圆角（即 CSS border-radius）使其看起来圆形。在正方形元素上，50％的值自然形成一个圆。使用这个，甚至在 HTML 中使用 SVG：

document.body.innerHTML+='<i></i>'.repeat(4);

i{border-radius:50%;display:inline-block;background:#F48024;}
svg {fill:#F48024;width:60px;height:60px;}
i:nth-of-type(1n){width:30px;height:30px;}
i:nth-of-type(2n){width:60px;height:60px;}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="60"/>
</svg>

- dakab

Answer 4

演示

CSS

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
}

html

<div></div>

- 4dgaurav

Answer 5

使用border-radius属性设置为50％。

例如：

```css border-radius: 50%; ```

.example-div {

    border-radius: 50%

}

- Kevin Damstra

Answer 6

.circle {
    border-radius: 50%;
    width: 500px;
    height: 500px;
    background: red;
}

<div class="circle"></div>

请参见此处的FIDDLE链接。

- bumbumpaw