在網頁設計中，關閉按鈕可以讓用戶關閉當前窗口或彈窗，提高用戶體驗。而在CSS3中，我們可以使用叉號作為關閉按鈕的樣式。下面就讓我們一起來學習如何使用CSS3來實現一個叉號形式的關閉按鈕。 首先，我們需要定義關閉按鈕的樣式。在CSS3中，有一個屬性叫做偽元素，可以讓我們在元素的前后添加一些特殊樣式，比如關閉按鈕的叉號樣式。我們可以使用:before和:after偽元素來實現。我們將按鈕定義為一個塊級元素，并設置寬高、邊框等樣式。然后，我們定位偽元素，并設置寬高、背景、旋轉等樣式。以下是代碼：

button.close {
display: block;
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
background: #ccc;
position: relative;
}
button.close:before, button.close:after {
content: "";
display: block;
position: absolute;
width: 20px;
height: 2px;
top: 14px;
left: 5px;
background: #fff;
transform: rotate(45deg);
}
button.close:after {
transform: rotate(-45deg);
}

上面的代碼中，我們定義了一個class為close的按鈕，指定了它的寬高、背景、邊框等樣式。然后，我們分別定義了:before和:after偽元素，設置寬高、背景、旋轉等樣式。其中，偽元素的content屬性用于顯示內容，我們這里設置為空字符串，表示不顯示任何內容。最后，我們通過設置transform屬性來實現旋轉效果，讓偽元素形成一個“X”形狀。 在HTML中，我們只需要添加一個button元素，并為它添加close類即可。以下是代碼：

點擊下面的按鈕關閉彈窗：

最終的效果如下圖所示：  通過CSS3的偽元素功能，我們可以輕松實現一個叉號樣式的關閉按鈕，提高用戶體驗，讓網頁看起來更加美觀。