隨著前端開發(fā)技術(shù)的不斷發(fā)展，越來越多的炫酷網(wǎng)站效果被開發(fā)出來。其中，曲線背景是目前備受矚目的一種。下面，我們來介紹如何使用CSS實現(xiàn)曲線背景。

.curved {
background: #ECECEC;
position: relative;
}
.curved:before,
.curved:after {
content: "";
background: inherit;
position: absolute;
width: 200%;
height: 100%;
top: 0;
left: -50%;
z-index: -1;
border-radius: 50%;
}
.curved:before {
transform: translateY(-70%);
}
.curved:after {
transform: translateY(70%);
}

以上代碼實現(xiàn)了一種非常簡單的曲線背景效果。我們首先創(chuàng)建一個父級元素，設(shè)置背景顏色。然后創(chuàng)建兩個偽元素before和after，它們的背景色同父級元素。接著，我們給偽元素設(shè)置絕對定位、寬度為父級元素的兩倍、高度等同父級元素的高度、top為0px、left為-50%（這樣，偽元素就變成了一個圓）。

接著，我們設(shè)置偽元素的z-index值為-1（確保偽元素在父級元素之后渲染）。然后，我們給偽元素都添加了一個border-radius屬性，將它們變成了半圓形。接著，我們通過偽元素的transform屬性，將它們分別垂直向上和垂直向下移動70%的父元素的高度，形成曲線的效果。

如果你需要更加復(fù)雜的曲線形狀，則需要使用更多的偽元素，并且需要靈活運用偽元素上的transform屬性，來調(diào)整它們的位置和旋轉(zhuǎn)角度。