如何制作圆形div？

Question

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

我怎样才能做到这一点？

可以使用Css或jquery

Answer 1

使用jquery和css你可以创建圆.我在这里给出了一个jquery解决方案,因为其他人已经提供了CSS解决方案.检查jquery DEMO.

jQuery代码

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

CSS代码

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

Answer 2

你可以做以下

小提琴

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

CSS

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

其他形状来源

Answer 3

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

CSS：

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

HTML：

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

Answer 4

使用 50% 的 border-radius 属性。

例如：

.example-div {

    border-radius: 50%

}