對矩形div使用邊框半徑CSS會產生橢圓角而不是圓角。我怎樣才能得到完美的圓角矩形div？
(來源:mozilla.org)
形式上，border-radius屬性的語法接受每個角有兩個值:水平半徑和垂直半徑(用斜杠分隔)。下面的線將創建一個橢圓形的邊界半徑類似于上面的第三個圖像。
border-radius: 10px / 5px;通常，我們只指定一個值。在這種情況下，該值用作垂直和水平半徑。下面的線將創建一個圓形的邊界半徑類似于上面的第二個圖像。
border-radius: 10px;使用百分比
Mozilla開發人員網絡將該屬性的可能值類型定義如下:
& lt長度& gt 表示圓半徑或省略號的長半軸和短半軸的大小。它可以用CSS數據類型允許的任何單位來表示。負值無效。
& lt百分比& gt 使用百分比值表示圓半徑或省略號的長半軸和短半軸的大小。水平軸的百分比指的是方框的寬度，垂直軸的百分比指的是方框的高度。負值無效。
當我們使用絕對長度單位(如像素或ems)時，使用單個值來創建圓半徑是沒問題的，但當我們使用百分比時會變得更復雜。由于該屬性的單值用法等同于兩次使用同一個值，因此下面兩行是等效的；然而，這些不一定會產生圓形的邊界半徑。
border-radius: 50%;
border-radius: 50%/50%;這些線條表示邊框由一個橢圓定義，其垂直半徑等于元素高度的50%，水平半徑等于元素寬度的50%。如果元素的寬度為200像素，高度為100像素，這將產生一個橢圓而不是圓形。
解決辦法
如果你想要一個圓形的邊框半徑，最簡單的方法是使用絕對測量單位(像像素或ems或除了百分比之外的任何單位)，但有時這并不適合你的用例，你想使用百分比。如果您知道包含元素的縱橫比，您仍然可以！在下面的例子中，由于我的元素的寬度是高度的兩倍，我將水平半徑縮小了一半。
#rect {
width: 200px;
height: 100px;
background: #000;
border-radius: 25%/50%;
}<div id="rect"></div>border-radius: 9999px確實產生了“完美的1/4圓”角，這就是為什么你可以用這個屬性制作css圓。它們有時看起來不像是完美的圓角，但那是一種視錯覺。如果這困擾著你，你可以嘗試用類似border-radius: 9px / 8px的東西來模仿這個效果
另一方面，如果你的div不是方形的，50%會產生非圓弧。同樣，您可以通過為x和y軸指定單獨的半徑來覆蓋您不喜歡的行為，例如border-radius: 10% / 20%。
如果你使用百分比，它會導致拉伸/橢圓外觀。您可能想嘗試用px來指定單位，以獲得更多定制的圓形外觀。
只需使用vw/vh定義半徑(至少對我有效):
button{
border-radius:1vh;
}這是因為vh / vw對于視口始終是常數，并且獨立于元素:)
除了凱爾文的回答之外， 要在矩形上獲得完美的圓角，請嘗試:
button {
border-radius: 50vh;
}具有諷刺意味的是，另一個影響邊界半徑的因素是邊界....如果你有一個邊界頂部，而沒有邊界的兩側，你會看到同樣的不平衡的邊界圓角效果，當你使用基于百分比的半徑。
我認為這是一個有用的特性。但是，請在你的CSS中添加一條評論，告訴未來的你(或其他人)你為什么要這么做。調試這是痛苦的！
這就是我從惱人的橢圓形問題中解脫出來的原因。
這是內聯CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 50px;
border: 1px solid black;
aspect-ratio: 1;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const ro = new ResizeObserver(entries => {
for (let entry of entries) {
entry.target.style.borderRadius = entry.target.style.width;
}
});
ro.observe(document.querySelector('.box'));
</script>
</body>
</html>