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

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; }

This is what worked for me:

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

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

I don't think your really need box-shadow-top because if you set offsetx to 0 and offsety to any positive value only remaining shadow is on top.

if you want to have shadow on top and shadow in the bottom you just can simply use two divs:

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

if you want to get rid of shadow on sides use rgba instead of hex color and set bigger offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

this way you give shadow more opacity so sides stay hidden and with more offset you get less opacity

full example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>

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

full example:

Related

Recent Posts