CSS的右上角關(guān)閉就是在網(wǎng)頁(yè)設(shè)計(jì)中常用到的關(guān)閉按鈕，它可以方便地關(guān)閉頁(yè)面上的窗口或彈出框。在CSS中，可以使用偽類(lèi)和定位等屬性來(lái)實(shí)現(xiàn)一個(gè)漂亮的右上角關(guān)閉按鈕。

/*CSS代碼片段*/
.close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
cursor: pointer;
}
.close:before, .close:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -1px 0 0 -10px;
width: 20px;
height: 2px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}

在上面的代碼片段中，我們定義了一個(gè).close類(lèi)，它的定位位置是絕對(duì)定位，距離頂部和右側(cè)分別是10個(gè)像素，寬和高為20像素。鼠標(biāo)滑過(guò)時(shí)，光標(biāo)會(huì)變成手型，點(diǎn)擊可以關(guān)閉窗口或彈出框。

接下來(lái)，我們定義了偽類(lèi):before和:after，它們的content屬性為空字符串，意思是在元素內(nèi)創(chuàng)建一個(gè)空的偽元素，這樣就可以通過(guò)它們的定位控制兩條交叉的線段，形成一個(gè)漂亮的X形關(guān)閉圖標(biāo)。我們將兩個(gè)偽元素水平垂直居中，同時(shí)定義寬為20像素、高為2像素、背景顏色為白色。最后，通過(guò)transform屬性將偽元素旋轉(zhuǎn)45度和-45度，形成X形圖標(biāo)。

在實(shí)際應(yīng)用中，我們可以將該CSS樣式與一個(gè)HTML標(biāo)簽一起使用：

<div class="popup">
<div class="close"></div>
<p>這里是彈出框的內(nèi)容</p>
</div>

這里，我們定義了一個(gè)類(lèi)名為popup的容器，它里面包含一個(gè)類(lèi)名為close的元素，還有一段文本內(nèi)容。在瀏覽器中顯示時(shí)，我們就可以通過(guò)點(diǎn)擊關(guān)閉圖標(biāo)從而關(guān)閉彈出框。

總的來(lái)說(shuō)，通過(guò)利用CSS的偽類(lèi)和定位屬性，我們可以輕松實(shí)現(xiàn)一個(gè)漂亮的右上角關(guān)閉按鈕，提升網(wǎng)頁(yè)的用戶(hù)體驗(yàn)。