ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Box-shadow & IE

 

4619
Web3r @Web3r
Делаю внутреннюю тень для блока. Тень - эмуляция 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):


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

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

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

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

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

Отредактировано Foggy - 14.12.2014
2615
Сергей @Pegass
дизайнеры - такие дизайнеры 🤪

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

Отредактировано Web3r - 15.12.2014
2970
удалён @Foggy
Можно ещё background linear gradient запилить на 1px. ********** похожий подход, думаю поймёшь.