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

Question

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 5         


        

Answer 1

You can accomplish a single-sided, inner shadow by setting your div to overflow:hidden and adding shadow elements along the borders.

Set an inner shadow on the top and bottom borders of a division:

HTML

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}