Как браузеры определяют, какие точные цвета использовать для границы: вставка или начало?

Если я определяю border: 1px outset blue; как стиль для элемента, браузер отображает два разных цвета границы: один для верхней и левой границ, а другой для нижней и правой границ.

li
  { border: 10px outset #0000FF;
    color: #FFF;
    background-color: #0000FF;
    width: 30%;
    }

p
  { margin: 1em 2em;
    text-align: center;
    }
<li><p>Hi!</p></li>

Ответы

Ответ 1

Существует не один алгоритм указанный в CSS:

UA могут выбрать собственный алгоритм для расчета фактических используемых цветов.

Различные браузеры выполняют значительно разные вещи:

  • Firefox смешивает выделенную границу с полным белым (около 57%), а нижняя граница - с полным черным (около 68%).

  • Opera смешивает границы с белым и черным менее сильно (по 25%).

  • WebKit (Safari, Chrome) смешивает границу нижнего уровня с черным (33%), оставляя выделенную границу как нетронутый указанный цвет.

  • IE разделяет ширину границы по два, когда вы используете вставку/начало. Внутренняя половина границы имеет оттенок оттенка 75% черного и нетронутый цвет подсветки. Внешняя половина границы имеет цвет подсветки, затененный 25% до черного, а цвет подсветки - 50%. Это приводит к воспроизведению стиля границы кнопки Windows 9x/NT4/2000, если ширина границы равна 2px.

К сожалению, вы не можете получать согласованные результаты из границ вставки/выхода/паза/гребня. Часто результаты разные, но все же в порядке между браузерами; если это не достаточно хорошо, вам нужно будет указать каждый цвет стороны границы явно.