形式上,border-radius屬性的語法為每個角接受2個值：垂直半徑和水平半徑(用斜杠分隔).以下行將創建一個類似于上面第三個圖像的橢圓邊框半徑.

border-radius: 5px/10px;

通常,我們只指定一個值.在這種情況下,該值被用作垂直和水平半徑.以下行將創建一個類似于上面第二個圖像的圓形邊框半徑.

border-radius: 10px;

使用百分比

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS data types. Negative values are invalid.

Denotes the size of the circle radius,or the semi-major and semi-minor axes of the ellipsis,using percentage values. Percentages for the horizontal axis refer to the width of the Box,percentages for the vertical axis refer to the height of the Box. Negative values are invalid.

當我們使用像素或ems這樣的絕對長度單位時,使用單個值來創建圓形半徑很好,但是當我們使用百分比時會變得更復雜.由于此屬性的單值使用與使用相同值兩次同義,因此以下兩行是等效的;但是,這些不一定會產生圓形邊界半徑.

border-radius: 50%;

border-radius: 50%/50%;

這些線表示“創建一個橢圓或圓,其垂直半徑等于元素高度的50％,其水平半徑等于元素寬度的50％,并將其用作邊界半徑.”.如果元素寬200像素,高100像素,則會產生橢圓而不是圓形.

解

如果你想要一個圓形的邊界半徑,最簡單的方法是使用絕對測量單位(如像素或ems或除百分比之外的任何東西),但有時候這不適合你的用例并且你想使用百分比.如果您知道包含元素的縱橫比,您仍然可以！在下面的例子中,由于我的元素寬度是它的兩倍,我將水平半徑縮放了一半.

#rect {

width: 200px;

height: 100px;

background: #000;

border-radius: 25%/50%;

}

總結

以上是生活随笔為你收集整理的html怎么设置椭圆文本框,html – 避免CSS border-radius中的椭圆形状的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。