CSS设置background-clip:content-box时圆形按钮变椭圆，content-box形状是什么？

椭圆渲染异常的核心原因是flex元素默认content-box尺寸非正方形，叠加background-clip: content-box的裁剪规则导致，具体逻辑如下：

• 对应样式中，元素设置了4rem * 4rem的固定宽高、4px的透明边框，未显式重置padding和line-height
• border-radius: 9999px的圆角从border-box外边缘向内，按比例逐层传递给padding-box、content-box
• 对于display:flex的元素，未显式设置padding:0和line-height:0时，浏览器会为文本基线预留默认行高空间，这部分空间会被计入content-box高度。该场景下content-box实际是宽高不等的矩形：宽度=4rem - 左右边框宽度=4rem-8px，高度=4rem - 上下边框宽度+基线预留高度，宽高存在几个像素的差值
• 当background-clip: content-box时，黄色背景只会被裁剪到content-box范围内，本身是矩形的content-box叠加大圆角后，就会呈现椭圆效果；而用box-shadow生成的外环是沿着border-box边缘渲染的，border-box本身是正圆形，最终就会出现外圆内椭圆的异常效果。

padding-box的覆盖范围是content区域+padding区域，透明边框内的整个padding区域是严格的正方形（尺寸为(4rem-8px) * (4rem-8px)），会完全覆盖掉content-box因基线预留产生的高度差，背景裁剪到这个正方形区域后叠加圆角，自然呈现正圆形。

如果要保留background-clip: content-box的初始设计，只需要显式重置默认的内边距和行高，强制content-box为正方形即可，修复后的代码如下：

.btn-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 4px solid transparent;
  background-color: #f7e938;
  width: 4rem;
  height: 4rem;
  box-shadow: 0px 0px 0px 4px #f7e938;
  background-clip: content-box;
  /* 新增以下两行即可修复椭圆问题 */
  padding: 0;
  line-height: 0;
}

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