I'm wondering about the support for side specific inner shadows in css3.
I know this works great on supported browsers.
div { box-shadow:inset 0px 1px 5px black; }
I'm just curious as to whether there is a way to achieve something like:
div { box-shadow-top:inset 0px 1px 5px black; }
Box-Shadow on One Side In order to create a shadow that would, in theory, have a light source coming from a singular point, the shadow would need to only exist on one side of the box. For instance, the bottom of the box. When creating a box-shadow on one side only, we have to focus on the last value, the spread radius.
You can comma separate box-shadow any many times as you like.
The simple answer is that you can't. box-shadow applies to the whole element only. You could use a different approach and use ::before in CSS to insert an 1-pixel high element into header nav and set the box-shadow on that instead.
This is what worked for me:
box-shadow: inset 1px 4px 9px -6px;
Example: http://jsfiddle.net/23Egu/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With