我想创建一个背景颜色为红色且形状完全圆形的div,应该如何实现?
可以使用CSS或jQuery。
可以使用CSS或jQuery。
#exampleCircle{
width: 500px;
height: 500px;
background: red;
border-radius: 50%;
}
HTML:
<div id = "exampleCircle"></div>
div
元素与 SVG circle
基元不同,它们总是矩形的。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>
.example-div {
border-radius: 50%
}
.circle {
border-radius: 50%;
width: 500px;
height: 500px;
background: red;
}
<div class="circle"></div>