關(guān)閉按鈕是CSS中常用的UI元素之一,它通常用于關(guān)閉模態(tài)框、提示框或者彈出框等窗口。在CSS中,我們可以使用偽類和樣式來創(chuàng)建關(guān)閉按鈕,也可以使用圖片或者字體圖標(biāo)等外部資源。
/* 使用偽類和樣式創(chuàng)建關(guān)閉按鈕 */ .close { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; cursor: pointer; background-color: #eee; } .close:before, .close:after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 12px; transform: translate(-50%, -50%); background-color: #333; } .close:before { transform: translate(-50%, -50%) rotate(45deg); } .close:after { transform: translate(-50%, -50%) rotate(-45deg); } /* 使用圖片創(chuàng)建關(guān)閉按鈕 */ .close { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; cursor: pointer; background-image: url('../images/close.png'); background-repeat: no-repeat; background-position: center; } /* 使用字體圖標(biāo)創(chuàng)建關(guān)閉按鈕 */ .close { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; cursor: pointer; font-family: 'Font Awesome 5 Free'; /* 需要引入字體圖標(biāo)庫 */ font-weight: 900; content: '\f00d'; }
以上是三種常見的關(guān)閉按鈕的實(shí)現(xiàn)方式,根據(jù)實(shí)際需求選擇一種即可。當(dāng)然,在實(shí)際開發(fā)中還可以通過JS來實(shí)現(xiàn)關(guān)閉按鈕的交互效果,例如點(diǎn)擊關(guān)閉按鈕時(shí)關(guān)閉模態(tài)框或彈出框等操作。