I am struggling with strange behaviour of “inset box-shadow”.
There is some 1px-wide line of background-color on the edge of div, and it is not affected by shadow.
Please take a look at the code to understand what i mean: https://jsfiddle.net/g5vgant8/
(Try to resize viewport if all seems ok, you should see that ugly lines)
My goal is to make smooth passage from outer color to inner color.
(Same situation in my Tic-Tac-Toe project: https://codepen.io/Keith_Martens/pen/JJdPag )
I have tried to:
- add outset shadow,
- use extra wrapper div with its own background-color and padding,
- set negative value of shadow blur,
- use 4 shadows, one for each corner,
- change inner background-color to same as outer, and use big inset shadow with inner color instead,
…but none of these solves the problem.
Seems that is not a bug, because i tested in 3 browsers and also IE, and the behaviour is always same.
Maybe you have any ideas?