CSS3 是最新的 CSS 規范之一，它帶來了許多新特性，使得網頁設計變得更加靈活、多樣化。其中，復合網頁是 CSS3 中非常實用的特性之一，它可以讓我們輕松地在一個元素內實現多重背景以及多重邊框，本文就來介紹一下：

.box {
width: 600px;
height: 400px;
margin: 50px auto;
background-color: #fff;
/* 多重背景 */
background-image: 
url('background-image-1.png'),
url('background-image-2.png');
background-position: 
top left,
bottom right;
background-repeat: 
no-repeat,
no-repeat;
/* 多重邊框 */
border: 10px solid #000;
border-image: 
url('border-image.png') 
20 20 20 20 stretch;
border-radius: 20px;
}

如上代碼所示，我們為一個名為 .box 的元素設置了寬度、高度、外邊距以及背景色，接下來就是使用復合網頁實現元素多重背景以及多重邊框。

多重背景的實現使用了 background-image 屬性，這個屬性可以接受多個參數，分別對應不同背景層的圖片。在本例中，我們給 .box 元素指定了兩張背景圖片，并分別將它們放置在左上角和右下角。

接下來，使用了 background-repeat 屬性禁止了圖片重復，使得兩個圖片可以完整地顯示在 .box 元素內。通過使用 background-position 屬性，我們指定了第一張圖片的位置（top left），以及第二張圖片的位置（bottom right）。

另外一個示例是多重邊框。首先，我們使用 border 屬性設置了一個簡單的邊框。接下來，使用 border-image 屬性加載一張自定義邊框圖片，并將它與 .box 元素原本的邊框疊加起來。

需要注意的是，border-image 的最后一個參數是用來指定邊框圖片擴展的方式，本例中使用了 stretch 把邊框圖片拉伸了一下，讓它可以完整地占據邊框空間。

最后，我們使用 border-radius 屬性將邊框角度圓化。至此，我們已經成功地使用了 CSS3 中的復合網頁技術，讓我們的網頁設計更加靈活、多樣化。