Страницы

Поиск по вопросам

среда, 5 июня 2019 г.

Различное отображение rgba у border-color и backgroud

Устанавливаю одно и то же значение rgba(0,0,0,.1) для border-color и background. Получается так, что граница немного темнее фона. Почему так происходит, и можно ли это как-нибудь отключить?
Пример на input'e:
input[type="text"], input[type="password"] { float: left; margin: 0; outline: none; padding: 0 9px; height: 28px; background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); border-radius: 3px; line-height: 30px; }
Мне надо, чтобы обводка была темнее, поэтому сделал их одинаковыми. Везде ли так будет?


Ответ

Так происходит, потому-что фон "заползает" под border.
И видно этот эффект, потому-что цвет бордера у вас с прозрачностью, происходит накладывание цветов, поэтому бордер становится чуть темнее.
Это стандартное поведение, если вам необходимо его изменить, то почитайте про свойство background-clip : http://htmlbook.ru/css/background-clip

Комментариев нет:

Отправить комментарий