<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>實心圓</title>
<style>
.solid-circle {
width: 100px; /* 圓的寬度 */
height: 100px; /* 圓的高度 */
background-color: blue; /* 圓的顏色 */
border-radius: 50%; /* 將角半徑設定為 50% 以形成圓形 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
發現結果是一個扁圓形，找了半天原因，原來是父級元素的問題， 總結如下：
如果您看到的圓是一個扁圓形，這可能是由於以下幾種原因：
父元素的樣式: 如果圓的父元素有
display: flex或其他樣式，可能會影響子元素的尺寸。確保父元素沒有限制子元素的寬度或高度。視口寬度和高度的比例: 在某些情況下，您的瀏覽器視窗的寬度和高度可能不相等，導致圓看起來像扁圓。您可以嘗試在瀏覽器中將視窗調整為正方形的比例。
CSS 樣式: 確保沒有其他 CSS 樣式影響到
.solid-circle類。可以使用瀏覽器的開發者工具檢視元素的實際計算樣式。
完整的示例
以下是一個包含完整 HTML 和 CSS 的示例，確保圓形效果正常：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>實心圓</title>
<style>
body {
display: flex; /* 使用 flexbox 來居中顯示 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器高度為視口高度 */
margin: 0; /* 移除預設邊距 */
background-color: #f0f0f0; /* 設定背景色 */
}
.solid-circle {
width: 100px; /* 圓的寬度 */
height: 100px; /* 圓的高度 */
background-color: blue; /* 圓的顏色 */
border-radius: 50%; /* 將角半徑設定為 50% 以形成圓形 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
執行說明：
將上面的程式碼複製並貼上到一個 HTML 檔案中，然後在瀏覽器中開啟。它應該呈現一個完美的實心圓。
使用
display: flex和height: 100vh將body的內容居中並填充整個視口，確保不會因為外部因素導致形狀失真。
如果您仍然遇到問題，請檢查是否有其他 CSS 樣式可能干擾。
