CSS box-тень небольшой границы на мобильном телефоне

Question

CSS box-тень небольшой границы на мобильном телефоне

Я использую тень-прямоугольник, чтобы получить цвет на внешней стороне элемента. На моем рабочем столе это выглядит нормально, но на моем мобильном я вижу небольшую границу, вероятно, вызванную высоким 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>

420 2

css css3

2 ответов:

Comments

Ничего не найдено.

Darko · Accepted Answer · 2016-12-19 13:35:08

Чтобы избавиться от границы, если это ваш вопрос? Попробуйте: .header-main { background: #009fe3; } Надеюсь, это поможет.

Amit kumar · Accepted Answer · 2016-12-19 13:41:12

Бокс-тень должна использоваться для смещения курса, бокс-тень, а не для сплошного цвета, который вы используете. Результат может быть достигнут и с помощью out box-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;
}  