Блог

Мне нужно подчеркнуть некоторые слова в заголовке. У меня есть следующий код из этой отличной статьи: https://css-tricks.com/styling-underlines-web /

Я использую две тени для создания подчеркивания размером 1 пиксель.

 .underline {
    box-shadow:
        inset 0 calc(-0.2em   1px) rgb(255, 255, 255),
        inset 0 -0.2em rgb(0, 0, 0);
}



<h1>I can help you <span class="underline">create positive impact.</span></h1>
  

Это работает нормально. Кроме iPhone, по краю белой тени вставки есть подпиксельная серая граница. Как будто белое поле не совсем закрывает черное поле. См. Захват экрана:

Я отмечаю, что код, представленный на веб-сайте CSS Tricks, включает

 .underline {
  background-size: 1px 1em;
  display: inline;
}
  

Я также пробовал использовать этот дополнительный код, но это не имеет никакого значения. (Я думаю, что этот код переполнен. Это ничего не делает?).

Итак … как мне остановить отображение этого серого контура?

Я попытался добавить тень к внешнему нижнему краю окна. Чтобы «замаскировать» серую линию, но это не сработало:

 .underline {
    box-shadow:
        0 2px rgb(255, 255, 255),
        inset 0 calc(-0.2em   1px) rgb(255, 255, 255),
        inset 0 -0.2em rgb(0, 0, 0);
}
  

Это известная ошибка в iOS.

Для решения проблемы вы можете просто поместить маску в качестве наложения:

-webkit-маска-изображение: -webkit-радиальный-градиент (белый, черный);

     .underline {
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        box-shadow:
            inset 0 calc(-0.2em   1px) rgb(255, 255, 255),
            inset 0 -0.2em rgb(0, 0, 0);
    }