Have an issue with box-shadow Inset bottom only
Use a negative value for the fourth length which defines the spread distance. This is often overlooked, but supported by all major browsers. See this Fiddle for the result.
div { background: red; height: 100px; width: 200px; -moz-box-shadow: inset 0 -10px 10px -10px #000000; -webkit-box-shadow: inset 0 -10px 10px -10px #000000; box-shadow: inset 0 -10px 10px -10px #000000;}
<div></div>
Can I have an inset shadow along the bottom of a div only?
Use negative distances to more the shadow to the left or up (therefore having them on the right and bottom edges for inset shadows).
CSS Box Shadow Bottom Only
Do this:
box-shadow: 0 4px 2px -2px gray;
It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.
CSS Box Shadow - Top and Bottom Only
As Kristian has pointed out, good control over z-values will often solve your problems.
If that does not work you can take a look at CSS Box Shadow Bottom Only on using overflow hidden to hide excess shadow.
I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this:
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
This will give you some control over the "amount" of shadow in each direction.
Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.
Hope this was what you were looking for!
Box shadow on top, bottom and left only
You are close to a solution. You just need to tweak the values a bit.
Here is a working example with your method, with some added emphasis so you can see the changes I made.
box-shadow: inset 0 5px 0.5px 0.5px #000,
inset 0 -5px 0.5px 0.5px #000,
inset 5px 0.5px 0.5px #000;
https://jsfiddle.net/ercnvzj7/
I recommend this, for future shading: http://css3generator.com/
Box shadow for bottom side only
You can do the following after adding class one-edge-shadow
or use as you like.
.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Source
How to get box-shadow on left & right sides only
NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.
You can get close with multiple box-shadows; one for each side
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/YJDdp/
Edit
Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/LE6Lz/
Related Topics
CSS - Syntax to Select a Class Within an Id
How to Position Elements to The Right in Md-Toolbar
How to Integrate CSS Pre-Processing Within Eclipse
Breaking to a New Line with Inline-Block
Sublime Text Wrap Selection with Snippet
A Mnemonic for The Order of CSS Margin and Padding Shorthand Properties
Simple_Form_For Rails Radio Button Inline
How to Create Inline Style with: Before and: After
How to Color The Fontawesome Icon Colors
Set Max Height of Adsense Responsive Ad Unit
CSS: Is It Correct That Text Content of a Div Overflows into The Padding