如何在CSS中制作椭圆形？
rac*_*hid 25 html css css-shapes
我想制作一个椭圆形:
但是当我使用这段代码时:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>Oval</title>
<style type="text/css">
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 40px;
}
</style>
</head>
<body>
<div class="oval"></div>
</body>
</html>
它给了我这个:
制作一个圆圈它可以工作,但不是椭圆形.
小智 23
你所要做的就是换border-radius: 40px到border-radius: 50%.
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 50%;
}<div class="oval"></div>您需要以百分比设置边框半径:
百分比:使用百分比值表示圆半径的大小,或省略号的半长轴和半短轴.水平轴的百分比是指盒子的宽度,垂直轴的百分比是指盒子的高度.负值无效.
来源:MDN
有关为什么border-radius的像素值无法输出椭圆形状的详细说明,请参阅Border-radius的百分比(%)和像素(px)
示例:
border-radius: 50%;
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 50%;
}<div class="oval"></div>