CSS3边框和渐变

时间:2012-10-17 09:57:06

标签: html5 css3 html fluid

我有一个HTML CSS查询。

我有以下JS小提琴。 http://jsfiddle.net/NC9NL/如果你看这个小提琴,你会看到我在主要内容的任一侧有两个div,以赋予它渐变效果。左右两个div设置为100%;

然而,当主要内容大于此时,例如需要滚动条这些其他两个div不会在页面上跟随它。有谁知道我怎么能做到这一点。

干杯,

1 个答案:

答案 0 :(得分:2)

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

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