手机上的CSS框阴影小边框

Question

我正在使用盒子阴影来获取元素外部的颜色。在我的桌面上，这看起来很好，但在我的手机上，我看到一个小边框，可能是由于我的移动屏幕的高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 { background: #009fe3; } 希望这些有所帮助。

Answer 2

盒子阴影应该用于偏离场景，盒子阴影，而不是纯色你正在使用的。结果也可以使用out-shadow

来实现

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

.container-row {
    position: relative;
    background-color: #009fe3;
    height: 90px;
    margin: -10px -15px;
    padding: 10px 15px 0;
}