如何在CSS中創建一個帶有border-radius的橢圓？

Question

我需要一個橢圓形而不是一個帶圓角的矩形。

這是我正在使用的代碼。

div { 
    position: fixed; 
    border-radius: 25px; 
    background: rgba(0,0,0,.5) 
    width: 100px; 
    height: 50px; 
    top: calc(50% - 25px); 
    right: calc(50% - 50px); 
} 

Answer 1

只需使用border-radius: 50%代替:)

div { 
 
    border-radius: 50%; 
 
    background-color: rgba(0,0,0,0.5); 
 
    width: 100px; 
 
    height: 50px; 
 
}

<div></div>

Answer 2

試試這個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> 

Answer 3

設置border-radius爲百分比。

div { 
    position: fixed; 
    width: 100px; 
    height: 50px; 
    background: rgba(0,0,0,.5); 
    border-radius: 50%; 
}