本文详解为何 css 中的点阵（radial-gradient）会溢出椭圆边界，并提供无需 javascript、完全响应式的纯 css 解决方案，通过数学原理计算最大内接矩形，确保点阵始终严格位于椭圆可视区域内且随尺寸自适应。
本文详解为何 css 中的点阵（radial-gradient）会溢出椭圆边界，并提供无需 javascript、完全响应式的纯 css 解决方案，通过数学原理计算最大内接矩形，确保点阵始终严格位于椭圆可视区域内且随尺寸自适应。
在 CSS 中绘制椭圆（border-radius: 50%）并叠加内部点阵时，一个常见误区是直接对 .oval 元素应用 background-image —— 此时 radial-gradient 的坐标系基于整个元素盒模型（即 200×100px 矩形区域），而椭圆仅是视觉裁剪效果，背景图仍会渲染在完整矩形范围内，导致红/黑点“溢出”到椭圆不可见区域，看似“点在外部”。
根本原因在于：border-radius 不改变元素的布局盒（layout box），只影响绘制（painting）阶段的裁剪。因此，要让点真正“居于椭圆内部”，必须将点阵限制在一个逻辑上完全位于椭圆内的可渲染区域中。
✅ 正确思路：利用最大内接矩形作为点阵容器
数学上，一个长轴为 2a、短轴为 2b 的椭圆（即宽 2a、高 2b 的 border-radius: 50% 元素），其能容纳的最大中心对称矩形尺寸为：
宽度 = a√2 ≈ 0.7071 × width，高度 = b√2 ≈ 0.7071 × height
该矩形完全位于椭圆内部，且四角恰好接触椭圆边界（推导见 Math StackExchange）。
我们可借助 ::after 伪元素创建这个“安全区”，并将其绝对居中于父椭圆内：
.oval {
background-color: gray;
border-radius: 50%;
position: relative; /* 为伪元素提供定位上下文 */
}
.oval::after {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
/* 关键：按比例计算最大内接矩形尺寸 */
width: calc(50% * 1.41421356237); /* = 0.7071 × width */
height: calc(50% * 1.41421356237); /* = 0.7071 × height */
/* 点阵使用 closest-side 确保始终在矩形内生成 */
background-image:
radial-gradient(closest-side at 20% 20%, #f00 5px, transparent 5px),
radial-gradient(closest-side at 80% 20%, #f00 5px, transparent 5px),
radial-gradient(closest-side at 20% 80%, #000 5px, transparent 5px),
radial-gradient(closest-side at 80% 80%, #000 5px, transparent 5px);
background-size: 20px 20px;
background-repeat: no-repeat;
}<div class="oval" style="width: 200px; height: 100px;"></div> <div class="oval" style="width: 100px; height: 200px;"></div> <div class="oval" style="width: 150px; height: 150px;"></div>
✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- calc(50% * 1.4142) 基于百分比计算，自动适配任意宽高；
- closest-side 保证每个径向渐变的半径以最近边为界，彻底避免溢出；
- transform: translate(-50%, -50%) 实现像素级居中，不依赖 flexbox 兼容性；
- 伪元素无 DOM 开销，语义干净。
? 进阶控制：调节点密度与垂直间距
若需“让点更靠近中间、垂直方向更紧凑”，可动态调整 background-position 和 background-size：
/* 更密集、偏中心的点阵（4个点） */ background-position: 35% 35%, /* 左上红点 → 向中心收缩 */ 65% 35%, /* 右上红点 */ 35% 65%, /* 左下黑点 */ 65% 65%; /* 右下黑点 */ background-size: 12px 12px; /* 缩小点间距 */
或使用 CSS 自定义属性实现用户输入驱动：
.oval {
--dot-spacing: 16px;
--dot-offset: 30%; /* 控制距边缘距离，越大越靠中心 */
}
.oval::after {
background-position:
calc(var(--dot-offset)) calc(var(--dot-offset)),
calc(100% - var(--dot-offset)) calc(var(--dot-offset)),
calc(var(--dot-offset)) calc(100% - var(--dot-offset)),
calc(100% - var(--dot-offset)) calc(100% - var(--dot-offset));
background-size: var(--dot-spacing) var(--dot-spacing);
}⚠️ 注意事项与兼容性
- 不要用 top: 0; left: 0; width: 100%; height: 100% 直接覆盖：这仍会超出椭圆视觉边界；
- 避免 flex 容器嵌套 .bolt 类：原始代码中 .bolt 使用 position: absolute 但父容器未设 position: relative，导致定位基准错误；
- closest-side 是关键：相比 circle at center，它根据渐变位置自动选择最近边作为半径上限，天然防溢出；
- 浏览器支持：calc()、border-radius: 50%、radial-gradient 在现代浏览器（Chrome 26+, Firefox 16+, Safari 6.1+）中均稳定支持。
此方案彻底解耦形状尺寸与点阵逻辑，用户只需修改 .oval 的 width/height，点阵自动缩放、居中、约束——真正实现“所见即所得”的响应式椭圆点阵设计。
