HTML 中的關閉按鈕用於在網頁或應用程式中關閉某個視窗或彈出框。關閉按鈕一般為一個圖示或文字，使用者點擊按鈕即可關閉目前視窗或彈出框。本文將介紹 HTML 中的關閉按鈕以及不同類型的關閉按鈕的實作方法。
在HTML 中，最基礎的關閉按鈕是按鈕元素，具體實現方式如下：
<button onclick="window.close()">关闭</button>
這個關閉按鈕的實現方法非常簡單，當使用者點擊按鈕時，就會呼叫JavaScript 的window.close() 函數關閉目前視窗。
除了文字按鈕，我們還可以使用圖片或圖示來實現關閉按鈕，以增添視覺效果。常用的關閉圖示有 X、× 等，可以使用字體圖示或自訂圖片來實現。以下是兩種實作方式：
字體圖示可以透過 CSS 來指定顏色、大小等樣式，更靈活方便。而且，字體圖示可以適合不同解析度的螢幕，更加清晰流暢。以下是使用Font Awesome 字體圖示的關閉按鈕範例：
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <button onclick="window.close()"> <i class="fas fa-times"></i> </button>
這裡我們使用link 元素匯入Font Awesome 的CSS 文件，然後在按鈕裡嵌套一個i 元素，設定其class 屬性為fas fa-times，表示使用times 圖示。當使用者點選關閉按鈕時，執行 JavaScript 的 window.close()。
使用自訂圖片實現關閉按鈕，需要先準備一張圖片，在網頁上顯示這張圖片的時間並不會太耗時。下面這個範例使用PNG 格式的關閉圖示：
<button onclick="window.close()"> <img src="close.png" alt="关闭"> </button>
這裡我們在按鈕裡嵌套一個img 元素，使用src 屬性指定圖片的URL，alt 屬性為圖像的描述，使用者點擊按鈕時，執行JavaScript 的window.close()。
外觀良好的按鈕往往可以提高使用者體驗，現在我們來對關閉按鈕進行樣式設計。
線框按鈕常用於輕量級或扁平化風格的設計，可透過 CSS 樣式設定按鈕的邊框、顏色、字體等。
下面是一個使用線框樣式的關閉按鈕實作：
<button class="close-button" onclick="window.close()">关闭</button>
我們新增了名為 close-button 的類別名，用於設定按鈕的樣式。以下是對應的CSS 程式碼：
.close-button {
border: 1px solid #999;
color: #999;
font-size: 14px;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
background-color: transparent;
transition: all .3s ease-in-out;
}
.close-button:hover {
background-color: #999;
color: #fff;
}上述程式碼實作瞭如下的按鈕樣式：
<button class="close-icon-button" onclick="window.close()"> <i class="fas fa-times"></i> </button>
close-icon-button，同時設定按鈕內嵌元素i 的類別名稱fas fa -times，表示使用times 圖示。
.close-icon-button {
border: none;
padding: 0;
background-color: transparent;
cursor: pointer;
transition: all .3s ease-in-out;
}
.close-icon-button:hover {
transform: rotate(45deg);
}
.close-icon-button i {
color: #999;
font-size: 14px;
transition: all .3s ease-in-out;
}
.close-icon-button:hover i {
color: #fff;
}
##四、不同型別場景的關閉按鈕
1. 模態框上的關閉按鈕
一般情況下，模態框的關閉按鈕應該放置在模態框的右上角，具體實現如下：
<div class="modal">
<button class="close-icon-button" onclick="closeModal()">
<i class="fas fa-times"></i>
</button>
<!-- 模态框内容 -->
</div>注意到這裡，我們添加了名為
closeModal () 的JavaScript 函數，用於關閉模態方塊。 下面是對應的樣式程式碼：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.modal button {
position: absolute;
top: 10px;
right: 10px;
}以上程式碼實作如下的模態框效果：
2. 多個標籤頁的關閉按鈕
下面是一個使用自訂圖片樣式的關閉按鈕範例：
<div class="tab">
<button class="close-tab-button" onclick="closeTab()">
<img src="close.png" alt="">
</button>
<a href="#">标签页标题</a>
</div>對應的CSS 程式碼如下：
.tab {
height: 40px;
line-height: 40px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px 4px 0 0;
background-color: #f7f7f7;
position: relative;
}
.close-tab-button {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
border: none;
background-color: transparent;
cursor: pointer;
}
.close-tab-button img {
width: 16px;
height: 16px;
}以上程式碼實作如下的標籤頁效果：
結語
以上是關閉按鈕 html的詳細內容。更多資訊請關注PHP中文網其他相關文章！
