background-color与border-radius组合下的渲染表现是否为预期行为？

这是浏览器渲染的预期行为，本质是圆角边缘的亚像素抗锯齿机制导致的。

当元素设置border-radius后，浏览器会通过生成半透明的过渡像素来平滑曲线边缘。尽管父、子元素的尺寸和圆角参数完全一致，但两者的抗锯齿像素层会产生叠加，使得父元素的红色背景透过子元素的半透明边缘显现出来。

可行的修复方案 #

• 提升子元素的层级，让它完全覆盖父元素的边缘：

.button {
  width: 100%;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

• 让子元素的圆角值略大于父元素，抵消抗锯齿的叠加影响：

.button {
  width: 100%;
  border-radius: calc(8px + 1px);
}

• 给父元素添加overflow: hidden，限制背景仅在圆角区域内显示：

.block {
  background-color: red;
  border-radius: 8px;
  width: 120px;
  text-align: center;
  overflow: hidden;
}

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