CSS是一種用于定義網頁樣式的語言，它讓我們可以為網頁添加各種樣式和效果。有時候，我們需要為網頁添加窗口拖動效果，使得用戶可以通過拖動窗口的方式來改變窗口的位置和大小。下面我們將介紹如何使用CSS來實現這一效果。

/* 設置窗口可拖動 */
#dragWindow{
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #eee;
cursor: move;
}
/* 拖動窗口時改變鼠標形狀 */
#dragWindow:hover {
cursor: pointer;
}

在上面的代碼中，我們為窗口添加了一個id屬性，值為“dragWindow”，然后設置該元素為絕對定位，使得它可以脫離文檔流。接下來，我們設置了該元素的top、left、width和height屬性，用于定義窗口的初始位置和大小。最后，我們為該元素添加了一個背景顏色和一個指針樣式，使得鼠標移動到窗口上時變成一個手型。

為了實現窗口拖動效果，我們需要JavaScript的幫助。具體步驟如下：

// 獲取拖動窗口的元素
var dragWindow = document.getElementById('dragWindow');
// 定義當前鼠標位置
var mouseX = 0;
var mouseY = 0;
// 定義當前窗口位置
var windowX = 0;
var windowY = 0;
// 定義一個標記，表示當前是否在拖動窗口
var isDragging = false;
// 添加鼠標按下事件監聽器
dragWindow.addEventListener('mousedown', function(e){
mouseX = e.clientX;
mouseY = e.clientY;
windowX = dragWindow.offsetLeft;
windowY = dragWindow.offsetTop;
isDragging = true;
});
// 添加鼠標移動事件監聽器
document.addEventListener('mousemove', function(e){
if(isDragging){
var deltaX = e.clientX - mouseX;
var deltaY = e.clientY - mouseY;
dragWindow.style.left = (windowX + deltaX) + 'px';
dragWindow.style.top = (windowY + deltaY) + 'px';
}
});
// 添加鼠標松開事件監聽器
document.addEventListener('mouseup', function(e){
isDragging = false;
});

在上述代碼中，我們定義了一個isDragging變量，用于標記當前是否正在拖動窗口。當鼠標按下時，我們記錄當前鼠標位置和窗口位置，然后將isDragging設置為true。接下來，在鼠標移動事件監聽器中，我們計算出鼠標移動的距離，并將窗口的left和top屬性分別加上這個距離，從而實現窗口的拖動效果。最后在鼠標松開事件監聽器中，將isDragging設置為false，表示不再拖動窗口。

通過以上的代碼實現，我們可以為網頁添加一個漂亮的窗口拖動效果，從而提高用戶體驗。