如何在CSS中淡出一个框阴影？ [英] How to fade a box shadow in CSS?

问题描述

N.B.我已经查看过此帖，无法效仿。我想复制英国文化协会瑞典网站上的影子：

这是我已经设法通过我自己的网站：

我无法发布图片，但HTML的结构如下：

 < div id =inner> 
<！ - 全宽度div，蓝色条纹的颜色 - > 
 
< div class =wrap> 
<！ - 现有的渐变背景图片 - > 
 
< div id =content-wrapper> 
<！ - 内容开始 - > 
< / 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）45％）; 
 background：-webkit-gradient（linear，left top，left bottom，color-stop（0％，rgba（0,0,0,0.25）），color-stop（45％，rgba ，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; 
} 
  

解决方案

/ p>

DEMO

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

解决方案

try this one might helpful

DEMO

这篇关于如何在CSS中淡出一个框阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！