CSS是一種用于設計網頁樣式的語言，它不僅可以美觀的呈現文本結構，還可以為其添加交互性。這篇文章將介紹如何使用CSS來實現鼠標點擊變背景顏色的效果。

button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

在上面的代碼中，我們創建了一個button元素并定義了其樣式。當我們將鼠標懸停在按鈕上時，其背景顏色將從綠色變為深綠色。當我們點擊按鈕時，其背景顏色保持不變，但會產生一個陰影效果，同時會向下移動4像素。

這個效果是通過使用:hover和:active偽類實現的。:hover偽類在鼠標懸停在元素上時應用樣式，而:active偽類在元素被激活（即被點擊）時應用樣式。

除了使用按鈕元素之外，我們還可以在CSS中使用普通元素來實現這個效果。上面的代碼展示了一個藍色正方形，在鼠標懸停時背景色變為紅色，在點擊時背景色變為綠色。

CSS中的:hover和:active偽類是很有用的，它們可以幫助我們改善用戶體驗，為網頁添加交互性。無論是在按鈕、圖片、文本或其他元素上，都可以隨意使用這些偽類，讓我們在設計網頁時更加靈活自如。