<!DOCTYPE html>
<html lang="en">
<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 class="solid-circle"></div>
</body>
</html>
发现结果是一个扁圆形，找了半天原因，原来是父级元素的问题， 总结如下：
如果您看到的圆是一个扁圆形，这可能是由于以下几种原因：
-
父元素的样式: 如果圆的父元素有
display: flex或其他样式，可能会影响子元素的尺寸。确保父元素没有限制子元素的宽度或高度。 -
视口宽度和高度的比例: 在某些情况下，您的浏览器窗口的宽度和高度可能不相等，导致圆看起来像扁圆。您可以尝试在浏览器中将窗口调整为正方形的比例。
-
CSS 样式: 确保没有其他 CSS 样式影响到
.solid-circle类。可以使用浏览器的开发者工具查看元素的实际计算样式。
完整的示例
以下是一个包含完整 HTML 和 CSS 的示例，确保圆形效果正常：
<!DOCTYPE html>
<html lang="en">
<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 class="solid-circle"></div>
</body>
</html>
运行说明：
- 将上面的代码复制并粘贴到一个 HTML 文件中，然后在浏览器中打开。它应该呈现一个完美的实心圆。
- 使用
display: flex和height: 100vh将body的内容居中并填充整个视口，确保不会因为外部因素导致形状失真。
如果您仍然遇到问题，请检查是否有其他 CSS 样式可能干扰。
