移动设备上的 CSS box-shadow 小边框

Question

我正在使用 box-shadow 来获得元素外部的颜色。在我的桌面上，这看起来不错，但在我的手机上，我看到了一个小边框，可能是我手机屏幕的高 PPI 造成的。请参见下面的屏幕截图。

代码

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.container.main {
  background-color: #fff;
}

.header-main{
  height: 90px;
  box-shadow: 0px -15px 0px 15px #009fe3;
}

.container-row{
  position: relative;
  background-color: #009fe3;
  height: 90px;
}

<div class="container main">
  <header class="header-main">
      <div class="container-row">
          Put your text here!
      </div>
  </header>
</div>

Answer 1

如果这些是您的问题，要摆脱边界吗？尝试:.header-main {
背景:#009fe3；
希望这些有所帮助。