本文详解如何使用纯 css（无需 javascript）在任意宽高比的椭圆（border-radius: 50%）内精准渲染居中、响应式、相对定位的点阵，避免点溢出边界，并支持动态尺寸适配。
本文详解如何使用纯 css（无需 javascript）在任意宽高比的椭圆（border-radius: 50%）内精准渲染居中、响应式、相对定位的点阵，避免点溢出边界，并支持动态尺寸适配。
在 CSS 中绘制椭圆通常通过 border-radius: 50% 实现，但其本质是等比例缩放的圆形变形体——即一个被拉伸的椭圆（x 轴半长为 a = width/2，y 轴半长为 b = height/2）。问题核心在于：直接在 .oval 元素上使用 position: absolute 或 background-image 定位点时，若未考虑椭圆几何约束，点极易渲染在视觉边界之外（尤其在扁平或细长椭圆中），因为 CSS 的 background-position 基于矩形容器坐标系，而非椭圆内切区域。
真正的解决思路是：不将点画在椭圆“表面”，而是画在一个严格内嵌于椭圆的最大可容纳矩形上。数学上，椭圆内可内接的最大矩形（轴对齐、中心重合）边长为 a√2 × b√2（推导见椭圆内接矩形极值问题）。当 a ≠ b 时，该矩形并非正方形，但其顶点恰好落在椭圆曲线上，且完全位于椭圆内部——这正是我们安全布点的理想画布。
以下为完整、可复用的纯 CSS 实现：
.oval {
background-color: #888;
border-radius: 50%;
/* 使用伪元素承载点阵，确保不干扰结构 */
}
.oval::after {
content: "";
display: block;
/* 关键：计算内接矩形尺寸（50% * √2 ≈ 70.71%）*/
width: calc(50% * 1.4142135623730951);
height: calc(50% * 1.4142135623730951);
/* 居中定位（相对于父椭圆）*/
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 点阵：4 个径向渐变，分别置于内接矩形四角 */
background-image:
radial-gradient(closest-side at center, #f00 100%, transparent 100%),
radial-gradient(closest-side at center, #f00 100%, transparent 100%),
radial-gradient(closest-side at center, #000 100%, transparent 100%),
radial-gradient(closest-side at center, #000 100%, transparent 100%);
background-size: 20px 20px;
background-position:
top left,
top right,
bottom left,
bottom right;
background-repeat: no-repeat;
}HTML 结构保持极简，无需额外 DOM 节点：
立即学习“前端免费学习笔记（深入）”；
<div class="oval" style="width: 200px; height: 100px;"></div> <div class="oval" style="width: 100px; height: 200px;"></div> <div class="oval" style="width: 200px; height: 200px;"></div>
✅ 优势说明：
- 完全响应式：calc(50% * 1.414...) 基于父容器百分比计算，width/height 任意变化均自动适配；
- 点不溢出：所有点均位于内接矩形内，而该矩形严格内含于椭圆，杜绝视觉越界；
- 垂直密度可控：通过调整 background-size（如改为 20px 12px）可独立控制纵向点间距，closest-side 确保点始终贴合内接矩形边界；
- 零 JS 依赖：纯声明式 CSS，性能高、可维护性强。
⚠️ 注意事项：
- radial-gradient(closest-side at center, ...) 是关键：closest-side 使渐变半径以到最近边的距离为基准，保证点大小恒定且边缘对齐；
- 若需更多点（如网格状），建议改用 CSS Grid 配合 clip-path: ellipse() 对子容器裁剪，但本方案已满足「中心聚集、相对布局、动态尺寸」的核心需求；
- 避免在 .oval 上直接设 display: flex 或 overflow: hidden——前者会干扰伪元素定位流，后者可能意外裁剪渐变边缘。
此方案将几何原理转化为稳健的 CSS 实践，让椭圆内的点阵真正“属于”它，而非侥幸堆叠在其上。
