Chrome扩展独立HTML弹窗圆角显示异常的修复方法

问题原因 #

Chrome扩展的弹窗自带默认容器样式，仅给body设置border-radius时，窗口背景或内部元素会从圆角区域外凸，导致视觉上的边角错位。

修复方法 #

方法一：统一根元素样式并隐藏溢出

修改CSS，同时对html和body做样式重置，确保圆角和边框完全贴合：

html, body {
  margin: 0;
  padding: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

body {
  border: 2px solid #ff6100;
}

方法二：补充背景色适配

若弹窗背景仍有透出，可给html添加与body一致的背景色，彻底覆盖窗口默认背景：

html {
  background-color: #ffffff; /* 替换为你的body实际背景色 */
  border-radius: 0.5rem;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  border: 2px solid #ff6100;
  border-radius: 0.5rem;
}

效果说明 #

通过给根元素设置圆角并隐藏溢出，能让弹窗的边框圆角完全包裹内部内容，消除边角外凸的问题；同时重置默认的margin和padding，避免额外间距干扰样式效果。

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