CSS是網頁設計中重要的組成部分，可以控制網頁的樣式和布局。其中，左右拉伸效果是常見的樣式之一。在這篇文章中，我們將介紹如何使用CSS實現左右拉伸效果。

/* CSS代碼 */
/* 指定拉伸區域的寬度和高度 */
.container {
width: 500px;
height: 400px;
}
/* 指定左右拉伸的元素 */
.left, .right {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
/* 橫向拉伸 */
resize: horizontal;
overflow: auto;
}
/* 左側元素 */
.left {
left: 0;
background-color: #ccc;
}
/* 右側元素 */
.right {
right: 0;
background-color: #eee;
}

在上述代碼中，我們首先指定了一個拉伸區域的容器，寬度為500像素，高度為400像素。接著，我們分別指定了左側和右側的元素，它們的寬度為50%，并且可以通過resize屬性進行橫向拉伸。通過將它們定位為絕對位置，我們可以讓它們在容器中水平排列，并且使用overflow屬性控制溢出內容的顯示方式。

在應用這段CSS代碼后，我們可以在HTML代碼中添加如下內容：

<div class="container">
<div class="left"><p>左側部分</p></div>
<div class="right"><p>右側部分</p></div>
</div>

這會在容器中創建一個左右兩部分的拉伸區域。當我們在瀏覽器中查看該頁面時，可以通過鼠標拖拽左右元素的邊緣來實現橫向拉伸效果。

綜上所述，CSS的左右拉伸效果是網頁設計中常見的樣式之一，它可以讓用戶方便地調整窗口布局，提高用戶體驗。