html - CSS3 边框和渐变

Question

我有一个 HTML CSS 查询。

我有以下 JS Fiddle。 http://jsfiddle.net/NC9NL/ 如果你看这个小提琴，你会看到我在主要内容的两侧有两个 div 来给它渐变效果。左右这两个div设置为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 );
}