Have an issue with box-shadow Inset bottom only
JSnippet DEMO
On top only:
-moz-box-shadow: inset 0 10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey;
On bottom only:
-moz-box-shadow: inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 -10px 10px -10px grey;
box-shadow: inset 0 -10px 10px -10px grey;
On top and bottom only:
-moz-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
Quick Example
.shadow-top {
-moz-box-shadow: inset 0 10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey;
}
.shadow-bottom {
-moz-box-shadow: inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 -10px 10px -10px grey;
box-shadow: inset 0 -10px 10px -10px grey;
}
.shadow-top-bottom {
-moz-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
}
div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }<div class='shadow-top'></div>
<div class='shadow-bottom'></div>
<div class='shadow-top-bottom'></div>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>