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

您可以执行以下操作

<强> FIDDLE

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

<强> CSS

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

其他形状 SOURCE

Answer 3

使用50％的border-radius属性。

例如：

.example-div {

    border-radius: 50%

}

Answer 4

<强> Demo

CSS

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

HTML

<div></div>

Answer 5

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

CSS：

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

HTML：

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

Answer 6

div元素，unlinke SVG circle基元，总是矩形的。但是你可以使用圆角使它看起来像圆形，例如：

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

Answer 7

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

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

请参阅此FIDDLE

如何制作圆形div？

7 个答案: