本文详解如何利用 CSS radial-gradient 与 calc() 动态计算，使点阵严格约束在任意宽高比的椭圆（border-radius: 50%）内部，并保持相对位置自适应，彻底解决点元素溢出、布局失联及响应式失效问题。
本文详解如何利用 css `radial-gradient` 与 `calc()` 动态计算，使点阵严格约束在任意宽高比的椭圆（`border-radius: 50%`）内部，并保持相对位置自适应，彻底解决点元素溢出、布局失联及响应式失效问题。
在 Web 开发中，常需在椭圆（即 width ≠ height 的 border-radius: 50% 元素）内渲染装饰性点阵（如模拟螺栓纹理、数据热区或视觉引导点）。但直接沿用矩形容器的绝对定位或伪元素背景方案，极易导致点阵“逃逸”出椭圆可视边界——根本原因在于：椭圆不是简单缩放的圆，其内部可安全渲染的最大矩形区域并非全尺寸，而是受几何约束的动态子集。
传统做法（如为 .bolt 设置 position: absolute 并硬编码 top/left）会因忽略椭圆曲率而失败；而依赖 Flexbox 居中伪元素（.bolt:before/.after）同样无效——因为 background-position: top center 等值是相对于整个元素盒模型（含被 border-radius 裁剪掉的区域），而非实际可见椭圆内容区。
✅ 正确解法是：放弃“在容器内摆放点元素”，转而将点阵作为椭圆自身的背景图案，并通过数学约束限定其生效范围。
核心原理来自解析几何：对于半长轴为 a、半短轴为 b 的椭圆（对应 CSS 中 width=2a、height=2b），其内接最大正方形边长为 √2 × min(a, b)。当 a ≠ b 时，该正方形恰能完全落入椭圆内，且四角触达椭圆边界。因此，我们只需在椭圆伪元素（::after）上绘制一个居中、尺寸可控的正方形区域，并在其上叠加点阵背景。
立即学习“前端免费学习笔记（深入）”；
以下是生产就绪的纯 CSS 实现：
.oval {
background-color: #888;
border-radius: 50%;
/* 宽高由用户输入动态控制，例如：width: var(--w, 200px); height: var(--h, 100px); */
}
/* 关键：使用 ::after 创建自适应点阵层 */
.oval::after {
content: "";
display: block;
position: absolute;
inset: 0; /* 覆盖整个椭圆 */
/* 数学居中：translate(-50%, -50%) 配合 left/top: 50% */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 计算内接正方形尺寸：边长 = √2 × min(半宽, 半高) = √2 × min(w/2, h/2) */
/* 简化为：min(50% * √2, 50% * √2) → 统一用 calc(50% * 1.4142) */
width: calc(50% * 1.4142);
height: calc(50% * 1.4142);
/* 四个点：红点（top-left, top-right），黑点（bottom-left, bottom-right） */
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%);
/* 点大小统一为 10px 直径（径向渐变半径 100% + 透明过渡）*/
background-size: 20px 20px;
/* 精确定位四角：基于正方形区域的左上、右上、左下、右下 */
background-position:
top left,
top right,
bottom left,
bottom right;
background-repeat: no-repeat;
}<!-- 用户可自由修改 width/height，点阵自动适配 --> <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>
? 关键细节说明：
- closest-side 是 radial-gradient 的关键参数：它确保渐变圆心到最近边的距离为半径，从而生成严格等径的实心圆点（避免 circle at center 在非正方形区域拉伸变形）；
- calc(50% * 1.4142) 是 √2 ≈ 1.41421356... 的近似，精确满足 min(a,b)×√2 几何约束，保证点阵始终在椭圆内；
- 所有点均通过 background-position 相对于伪元素自身（即那个内接正方形）定位，彻底脱离父容器尺寸干扰；
- 若需增加点密度（如垂直方向更密集），可减小 background-size（如 12px 12px）并调整 background-position 偏移量，例如：
background-position: 25% 25%, /* 左上：x=25%, y=25% */ 75% 25%, /* 右上 */ 25% 75%, /* 左下 */ 75% 75%, /* 右下 */
⚠️ 注意事项：
- 此方案不支持 IE；现代浏览器（Chrome/Firefox/Safari/Edge ≥ 79）完全兼容；
- 避免对 .oval 设置 overflow: hidden —— ::after 已天然裁剪，额外隐藏可能干扰层叠；
- 如需动态响应用户输入的宽高，推荐用 CSS 自定义属性（--w, --h）配合 style="--w:200px; --h:100px"，再于 CSS 中写 width: var(--w); height: var(--h);；
- 若点需交互（如 hover 效果），请改用 SVG 或 Canvas 方案——纯 CSS 背景点无法单独绑定事件。
此方法以零 JavaScript、零 DOM 节点增删，实现了数学严谨、响应式鲁棒、维护成本极低的椭圆内点阵渲染，是 CSS 几何能力与设计需求深度结合的典范实践。
