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

ボックスシャドウはオフコース、ボックスシャドウで使用する必要があり、使用しているものは無地ではありません。結果はアウトボックスの影で達成することができるも

.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; 
}