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

#css

Устанавливаю одно и то же значение 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;
}


Мне надо, чтобы обводка была темнее, поэтому сделал их одинаковыми. Везде ли так будет?
    

Ответы

Ответ 1

Так происходит, потому-что фон "заползает" под border.

И видно этот эффект, потому-что цвет бордера у вас с прозрачностью, происходит накладывание
цветов, поэтому бордер становится чуть темнее.

Это стандартное поведение, если вам необходимо его изменить, то почитайте про свойство
background-clip : http://htmlbook.ru/css/background-clip


Ответ 2

фоновый цвет для input черный с 10% прозрачностью к нему добавляется border тоже
на 10% и получается 20% то есть rgba(0,0,0,.2);