如何淡入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陰影框？

回答

相關問題