html - CSS3 边框和渐变

Question

我有一个 HTML CSS 查询。

我有以下 JS Fiddle。 http://jsfiddle.net/NC9NL/如果你看一下这个 fiddle ，你会看到我在主要内容的两边都有两个 div 来赋予它渐变效果。这两个div left和right设置为100%；

然而，当主要内容比这个大时，例如需要一个滚动条，其他两个 div 不跟随它向下移动页面。有谁知道我怎样才能做到这一点。

干杯，

Answer 1

我认为您并不真的需要那些额外的列。只需将两个渐变合并为一个并将其分配给主列即可:

.container_body {
    background: #fff;
    background: -moz-linear-gradient(left, #c6c6c6 0%, #ffffff 2%, #ffffff 98%, #c6c6c6 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c6c6c6), color-stop(2%,#ffffff), color-stop(98%,#ffffff), color-stop(100%,#c6c6c6));
    background: -webkit-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -o-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -ms-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: linear-gradient(to right, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#c6c6c6',GradientType=1 );
}