How to fade a box shadow in CSS?

问题

N.B. I've already looked at this post and can't emulate it. I'm trying to replicate the shadow on the British Council Sweden site:

This is as far as I've managed to get on my own site:

I can't post images yet but the HTML is structured like this:

<div id="inner">
<!--Full width div, blue bar of color here-->

    <div class="wrap">
    <!--Existing gradient background image here-->

         <div id="content-wrapper">
         <!--Content begins-->
         </div>

     </div>

</div>

The existing CSS:

#inner{
    background: #1e5799;
    background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#0057be));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#0057be 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 100%);
    background: linear-gradient(to bottom,  #1e5799 0%,#0057be 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
    background-size: 1px 100px;
    background-repeat: repeat-x;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

#inner .wrap {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 45%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(45%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
    background: linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000',endColorstr='#00000000',GradientType=0 );
    border-radius: 10px;
}

#content-sidebar-wrap {
    background: #fff;
    float: left;
    margin: 1em;
}

回答1:

try this one might helpful

DEMO

来源：https://stackoverflow.com/questions/12585661/how-to-fade-a-box-shadow-in-css

标签

css

background-image

gradient

fade

css3