0

注意我已经看过这篇文章并且无法模仿它。我正在尝试在英国文化协会瑞典网站上复制阴影：

这是我设法在我自己的网站上获得的：

我还不能发布图片，但 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;
}
4

1 回答 1

1

试试这个可能会有所帮助

演示

于 2012-09-25T17:07:42.090 回答