Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can CSS3 box-shadow:inset do only one or two sides? like border-top?

Tags:

css

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; } 
like image 669
ndmweb Avatar asked May 06 '11 21:05

ndmweb


People also ask

How do you put a box-shadow on one side?

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.

Can you have multiple box shadows in CSS?

You can comma separate box-shadow any many times as you like.

How do you put a box-shadow on top?

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.


1 Answers

This is what worked for me:

box-shadow: inset 1px 4px 9px -6px; 

Example: http://jsfiddle.net/23Egu/

like image 62
nischtname Avatar answered Oct 13 '22 06:10

nischtname