我需要一个椭圆形而不是一个带圆角的矩形。如何在CSS中创建一个带有border-radius的椭圆?
这是我正在使用的代码。
div {
position: fixed;
border-radius: 25px;
background: rgba(0,0,0,.5)
width: 100px;
height: 50px;
top: calc(50% - 25px);
right: calc(50% - 50px);
}
我需要一个椭圆形而不是一个带圆角的矩形。如何在CSS中创建一个带有border-radius的椭圆?
这是我正在使用的代码。
div {
position: fixed;
border-radius: 25px;
background: rgba(0,0,0,.5)
width: 100px;
height: 50px;
top: calc(50% - 25px);
right: calc(50% - 50px);
}
只需使用border-radius: 50%
代替:)
div {
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
width: 100px;
height: 50px;
}
<div></div>
试试这个link 这将解释所有你需要的不同的形状。
以下是您如何实现它的示例。
#round {
position: relative;
width: 100px;
height: 100px;
margin: 20px 0;
background: orange;
border-radius: 48%/25%;
color: white;
}
#round:before {
content: '';
position: absolute;
top: 10%;
bottom: 11%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 21%/68%;
}
<div id="round"></div>
设置border-radius
为百分比。
div {
position: fixed;
width: 100px;
height: 50px;
background: rgba(0,0,0,.5);
border-radius: 50%;
}