本文详解如何通过 css radial-gradient 与 calc() 动态计算，让点阵图案严格约束在任意宽高比的椭圆（border-radius: 50%）内部，并保持相对定位、响应式缩放与视觉居中，无需 javascript 或硬编码像素值。
本文详解如何通过 css radial-gradient 与 calc() 动态计算，让点阵图案严格约束在任意宽高比的椭圆（border-radius: 50%）内部，并保持相对定位、响应式缩放与视觉居中，无需 javascript 或硬编码像素值。
在 CSS 中绘制“椭圆内点阵”看似简单，实则暗藏几何陷阱。问题根源在于：.oval 元素虽设 border-radius: 50% 形成视觉椭圆，但其内容盒（content box）仍是矩形；而原方案中 .bolt:before/.bolt:after 使用 position: absolute 并依赖 top: 0、left: 0 等绝对坐标，导致点阵实际渲染在矩形边界上——当宽高不等（如 200px × 100px）时，点便“溢出”到椭圆可视区域之外。
真正的解法是放弃子元素定位，转而用伪元素 ::after 在椭圆自身背景层直接绘制点阵，并利用数学原理确保所有点始终落在椭圆内部。
✅ 核心原理：内接矩形 + 最大安全区域
椭圆（即拉伸的圆）内可容纳的最大正方形边长为 √2 × min(a, b)，其中 a、b 为半轴长。对 width: W, height: H 的 .oval，其半轴为 W/2 和 H/2，故最大内接正方形边长为：
min(W, H) × √2 / 2 ≈ min(W, H) × 0.7071
为兼顾宽高比变化且保持点阵始终可见，我们采用更稳健的策略：以 50% 为基准，乘以 √2 ≈ 1.4142，得到覆盖椭圆核心安全区的正方形尺寸（即 width: calc(50% * 1.4142); height: calc(50% * 1.4142);）。该区域完全位于椭圆内部，且随容器缩放自适应。
立即学习“前端免费学习笔记（深入）”；
✅ 纯 CSS 实现代码
.oval {
background-color: gray;
border-radius: 50%;
position: relative; /* 为 ::after 定位提供上下文 */
}
/* 动态内接区域 + 点阵 */
.oval::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 关键：动态计算安全区域尺寸 */
width: calc(50% * 1.4142135623730951);
height: calc(50% * 1.4142135623730951);
/* 四个点：红-红-黑-黑，使用 closest-side 确保不超出当前盒 */
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:
25% 25%, /* 左上红点 */
75% 25%, /* 右上红点 */
25% 75%, /* 左下黑点 */
75% 75%; /* 右下黑点 */
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: 200px; height: 200px;"></div>
⚠️ 关键注意事项
- closest-side 是关键：它确保径向渐变半径以“到最近边的距离”为界，避免点被裁切或溢出；
- background-position 使用百分比：25%/75% 基于 ::after 生成的安全正方形区域，天然实现“靠近中心”的布局需求；
- 垂直间距控制：通过调整 background-position 的 Y 值（如 30% 和 70%）可进一步压缩垂直间距，同时保持相对性；
- 避免 flex 误用：.oval 上的 display: flex 对伪元素无效，且会干扰 position: absolute 的定位上下文；
- 响应式保障：所有尺寸均基于百分比与 calc()，窗口缩放或动态修改 width/height 时，点阵自动重排，零 JS 干预。
此方案将几何约束转化为 CSS 表达式，既满足设计精度要求，又具备工业级健壮性——无论用户输入何种宽高值，点阵永远忠实地“呼吸”在椭圆之内。
