如何淡入CSS阴影框？

N.B.我已经看过this post，无法模拟它。我试图复制上影British Council Sweden网站：如何淡入CSS阴影框？

这是据我已经成功地得到my own site：

我不能发表图片，但是这场HTML的结构是这样的：

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

现有的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; 
}

来源

2012-09-25 jcpeden

你试图仿效影子是一个[图]（http://www.britishcouncil.se/wp-content/themes/wordpressweb-v4/assets/images/shadow.png），也许使用该技术会更容易。 – JKirchartz

感谢您指出了这一点;我没有意识到这是一个问题。 – jcpeden

我敢肯定，这可以用CSS来完成，因为他们已经做了类似的事情[这里]（http://stackoverflow.com/questions/10938462/taper-fade-css-box-shadow?rq=1）。为什么在CSS可以使用图片时使用图片？ – jcpeden

试试这一条可能有用

DEMO

来源

2012-09-25 17:07:42 Afshin

更好，但仍然不是那样的影子不再消失：[Box Shadow Needs Fade]（http://solaslite.wpengine.com/） – jcpeden

尝试新的DEMO它接近你想要的 – Afshin

谢谢Afshin，但我不'我认为它会以这种方式工作。 [本文]（http://stackoverflow.com/questions/10938462/taper-fade-css-box-shadow?rq=1）在半透明渐变上使用白色阴影，但由于我的背景是双色调，这不是一个选项。 – jcpeden

如何淡入CSS阴影框？

回答

相关问题