CSS椭圆内点阵居中技巧

本文揭秘了一种纯CSS实现椭圆内点阵精准居中的高阶技巧：巧妙结合radial-gradient背景绘制与calc()动态计算，基于椭圆内接正方形的几何原理，自动推导出完全位于椭圆可视区域内的安全绘制区域，使红黑四点始终严格约束在任意宽高比的border-radius: 50%椭圆内部，同时保持响应式缩放、视觉中心对齐和零JavaScript依赖——让看似棘手的图形定位难题，化为一行行优雅可复用的CSS表达式。

本文详解如何通过 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 表达式，既满足设计精度要求，又具备工业级健壮性——无论用户输入何种宽高值，点阵永远忠实地“呼吸”在椭圆之内。

以上就是《CSS椭圆内点阵居中技巧》的详细内容，更多关于的资料请关注golang学习网公众号！