CSS 如何制作圆形的div？

How to make a div with a circular shape?

提问by Saswat

i want to create a div with background color red and completely circular in shape

我想创建一个背景颜色为红色且形状完全为圆形的 div

How can i do that?

我怎样才能做到这一点？

Css or jquery both can be used

css 或 jquery 都可以使用

回答by Kheema Pandey

Using jqueryand cssyou can create circle. I am giving here a jquery solution, as CSS solution already provided by others. check jquery DEMO.

使用jquery，css您可以创建圆圈。我在这里给出了一个 jquery 解决方案，因为其他人已经提供了 CSS 解决方案。检查 jquery演示。

jQuery Code

jQuery 代码

$(document).ready(function()
{
  $("div").css("border-radius", "50%");
});

CSS Code

CSS 代码

div
{
/*border-radius: 50%;*/
width: 50%;
height: auto;
padding-top: 50%;
background: #ef8913;
}

回答by Richa

You can do following

您可以执行以下操作

FIDDLE

小提琴

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

CSS

CSS

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

Other shape SOURCE

其他形状来源

回答by Kevin Damstra

Use a border-radius property of 50%.

使用 50% 的边界半径属性。

So for example:

例如：

.example-div {

    border-radius: 50%

}

回答by 4dgaurav

Demo

演示

css

css

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

html

html

<div></div>

回答by Nirvik Baruah

By using a border-radius of 50% you can make a circle. Here is an example:

通过使用 50% 的边界半径，您可以制作一个圆。下面是一个例子：

CSS:

CSS：

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

HTML:

HTML：

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

回答by dakab

divelements, unlinke SVG circleprimitives, are always rectangular. But you can use round corners to make it look round, for example:

div元素，取消链接 SVGcircle原语，总是矩形的。但是您可以使用圆角使其看起来更圆，例如：

div.circle{ border-radius:50px; }

回答by bumbumpaw

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

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

see this FIDDLE

看到这个小提琴