具有圆形边框和溢出的 HTML Div 容器：隐藏，当另一个 div 显示背景时在内部创建白色像素

Question

这是代码：

.container {
  height: 300px;
  width: 300px;
  border: 2px solid red;
  border-radius: 15px;
  overflow: hidden;
}

.background {
  background: green;
  height: 100%;
  width: 100%;
}

<div class="container">
  <div class="background"></div> 
</div>

它产生这样的视图：

如何消除背景和边框之间的白色重影像素？

Answer 1

您可以使用

box-shadow

这是因为

box-shadow

属性是制作清晰且干净的边框而没有任何白色重影像素的好选择。

.container {
  height: 300px;
  width: 300px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 0 2px red;
}
    
.background {
  background: green;
  height: 100%;
  width: 100%;
}

<div class="container">
  <div class="background"></div> 
</div>