本文详解如何利用纯 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 方案：
✅
关键优势说明
：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
零 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 无裁剪作用。
总结：椭圆内点阵布局的本质是
几何约束问题
，而非定位技巧问题。通过将点阵作为背景绘制在经数学校准的伪元素上，我们既保证了视觉准确性，又获得了极致的灵活性与可维护性。
.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;
}