CSS如何正确实现正方形完全覆盖带边框圆形元素

出现红边露出的核心原因是CSS盒模型和绝对定位的参考基准规则：

• 当父元素.circle设置box-sizing: border-box时，定义的120px * 120px是包含border在内的总尺寸。由于存在1px的红色边框，父元素实际可用的内容区尺寸为120px - 2*1px = 118px * 118px。子元素.square设置width: 100%; height:100%时，尺寸参考的是父元素的内容区，因此只有118px，无法覆盖外围1px的边框。
• 移除box-sizing: border-box后，父元素的120px宽高仅指内容区尺寸，算上1px边框后总渲染尺寸变为122px * 122px，子元素100%宽高只有120px，依然比父元素总尺寸小2px，边框露出的问题自然不会解决。

以下三种方案都可以实现正方形完全覆盖圆形（含边框）的效果，按需选择即可：

方案1：四方向负偏移（改动最小，最推荐） #

不需要修改现有盒模型配置，通过四个方向的负偏移让绝对定位的子元素自动撑满父元素包含边框的全部范围：

.square {
  position: absolute;
  /* 向外偏移1px，刚好抵消父元素边框的厚度 */
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background-color: white;
  /* 无需手动设置宽高，四个方向的偏移规则会自动计算元素尺寸 */
}

原理：绝对定位元素同时设置四个方向的偏移值时，会自动拉伸填满父元素的padding区+向外扩展偏移量，刚好覆盖到边框的外边缘。

方案2：用内阴影模拟边框 #

如果不想调整定位属性，可以把边框从border属性改为内阴影实现，让边框效果绘制在父元素内容区范围内，这样子元素100%宽高即可完全覆盖：

.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* 移除原border属性，用内阴影模拟1px红边 */
  box-shadow: inset 0 0 0 1px red;
  box-sizing: border-box;
  background-color: white;
}

这种写法下父元素内容区尺寸为完整的120px，原有.square的样式不需要做任何修改即可实现全覆盖。

方案3：手动计算子元素尺寸 #

保留原有定位和盒模型设置，手动给子元素宽高加上边框的厚度，同时调整偏移量对齐父元素边框外边缘：

.square {
  position: absolute;
  /* 向左向上偏移1px，对齐父元素边框的外左上角 */
  top: -1px;
  left: -1px;
  /* 宽高在内容区尺寸基础上加上上下/左右两个边框的厚度 */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-color: white;
}

内容的提问来源于stack exchange，提问作者Ooto