在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常會(huì)遇到需要讓某個(gè)元素的背景色或背景圖像延伸至頁(yè)面的兩側(cè)的情況，這就需要用到CSS兩邊延伸的技巧。

.container {
background: url(bg.jpg) repeat-x;
margin-left: -50vw;
margin-right: -50vw;
padding-left: 50vw;
padding-right: 50vw;
}

在如上代碼中，我們使用了負(fù)的margin和正的padding值達(dá)到了兩邊延伸的效果。其中，margin-left和margin-right的值為負(fù)的50vw，即視窗寬度的一半；padding-left和padding-right的值為正的50vw，即視窗寬度的一半。這樣，容器的實(shí)際寬度就是視窗寬度的100%加上兩側(cè)各50vw的距離。

通過這種方式實(shí)現(xiàn)兩邊延伸的好處是，可以讓元素的背景圖像或背景色始終完整地展示在視窗中，而不會(huì)被裁剪掉。另外，由于使用了padding而不是直接修改寬度，所以也不會(huì)影響到元素內(nèi)部的布局。