本文详解如何利用纯 css（无需 javascript）将点阵元素精准约束在椭圆（border-radius: 50%）内部，并实现宽高动态变化下的自动居中、等比缩放与密度可控布局，彻底规避绝对定位偏移和硬编码陷阱。
本文详解如何利用纯 css（无需 javascript）将点阵元素精准约束在椭圆（border-radius: 50%）内部，并实现宽高动态变化下的自动居中、等比缩放与密度可控布局，彻底规避绝对定位偏移和硬编码陷阱。
在使用 border-radius: 50% 创建椭圆（即拉伸的圆形）时，一个常见误区是：直接复用矩形容器内的绝对定位逻辑（如 top: 0; left: 0; background-position: top left）会导致点元素“溢出”可视区域。根本原因在于：椭圆的可绘制边界并非其外框矩形（bounding box），而是由椭圆几何定义的内部有效区域；而 background-position 的坐标系始终基于该外框矩形，若未做几何校准，点就会落在椭圆轮廓之外。
正确的解法是放弃依赖子元素绝对定位，转而利用伪元素 ::after 在椭圆自身上叠加背景点阵，并通过数学约束将点阵限制在最大内接矩形范围内。根据解析几何，一个宽为 2a、高为 2b 的椭圆（即 CSS 中 width: 2a, height: 2b），其能容纳的最大内接矩形尺寸为 a√2 × b√2 —— 这正是点阵安全渲染的边界。
以下为完整、可复用的纯 CSS 方案：
.oval {
background-color: #888;
border-radius: 50%;
/* 宽高由外部控制，支持任意值 */
}
/* 内接矩形尺寸：宽度 = 50% * √2 ≈ 70.71%，高度同理 */
.oval::after {
content: "";
display: block;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(50% * 1.4142135623730951);
height: calc(50% * 1.4142135623730951);
/* 四个点：红×2 + 黑×2，位于内接矩形四角 */
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 控制 */
background-size: 16px 16px; /* 缩小此值可让点更密集 */
background-position:
top left,
top right,
bottom left,
bottom right;
background-repeat: no-repeat;
}<!-- 支持任意宽高组合，自动适配 --> <div class="oval" style="width: 200px; height: 100px;"></div> <div class="oval" style="width: 120px; height: 180px;"></div> <div class="oval" style="width: 150px; height: 150px;"></div>
✅ 关键优势说明：
立即学习“前端免费学习笔记（深入）”；
- 零 JavaScript：完全基于 CSS 计算，无运行时开销；
- 真正响应式：calc() 与百分比结合，随容器宽高实时重算内接矩形；
- 密度可控：仅需调整 background-size 即可统一缩放所有点的大小与间距；
- 语义干净：无需额外 DOM 节点，避免嵌套污染与继承干扰；
- 兼容性强：radial-gradient + closest-side 在现代浏览器中稳定支持（Chrome 88+ / Firefox 85+ / Safari 15.4+）。
⚠️ 注意事项：
- 若需更多点（如网格状分布），可扩展 background-image 列表并配合 background-position: x y 精确排布，但建议优先使用 repeating-radial-gradient 实现自动填充；
- closest-side 是关键——它确保渐变圆心到椭圆边界的距离被正确截断，避免点形畸变；
- 避免在 .oval 上设置 overflow: hidden，因伪元素已天然受限于内接矩形，且 overflow 对 background-image 无裁剪作用。
总结：椭圆内点阵布局的本质是几何约束问题，而非定位技巧问题。通过将点阵作为背景绘制在经数学校准的伪元素上，我们既保证了视觉准确性，又获得了极致的灵活性与可维护性。
