Box-shadow & IE

14.12.2014

Делаю внутреннюю тень для блока. Тень - эмуляция border-left.
elem {
box-shadow: 1px 0 0 0 rgba(144, 155, 182, 1) inset;
}
В итоге в gecko и webkit отображается так (полоса слева - это и есть получившаяся тень размером 1px, картинка увеличена в несколько раз для наглядности):


В IE тень составляет уже 2px, причем оба разного цвета - тона от искомого rgba(144, 155, 182, 1):


Это такая особенность рендеринга? Или я как-то неправильно декларирую тень?

14.12.2014

Это особенность рендеринга. Тень по идее и должна быть размытой таким образом везде.

А чем border-left не устраивает? + можно проставить нужный box-sizing, если border не в нужном месте.

14.12.2014

Да двойной border для ссылки делаю. Перед box-shadow стоит уже нормальный border-left. Теперь вот псевдоэлементом придется. Спасибо в очередной раз IE...

14.12.2014

Не придётся.
Если цвета близкие по палитре, используй **********.
Если разного — используй **********.

15.12.2014

дизайнеры - такие дизайнеры 🤪

15.12.2014

Border-style вариант, но самый крайний. Хочется pixel-color-perfect. (:
Outline не подойдёт, нужна линия только слева...
Что остается? Маленький background-image и :before/after.

15.12.2014

Можно ещё background linear gradient запилить на 1px. ********** похожий подход, думаю поймёшь.