CSS中，我們可以為圖片添加一個(gè)點(diǎn)擊藍(lán)色邊框，這對(duì)于一些需求較為嚴(yán)格的網(wǎng)站來說，非常有用。 本文將為大家簡單介紹如何使用CSS來實(shí)現(xiàn)為圖片添加一個(gè)點(diǎn)擊藍(lán)色邊框。

// HTML代碼
<img src="images/picture.jpg" alt="圖片">
// CSS代碼
img {
outline: none; /* 去除默認(rèn)邊框 */
}
img:focus {
outline: 2px solid blue; /* 添加點(diǎn)擊藍(lán)色邊框 */
}

以上CSS代碼為圖片添加了點(diǎn)擊藍(lán)色邊框，但需要注意的是，該邊框只有在圖片被點(diǎn)擊后才會(huì)出現(xiàn)，因此，我們需要將圖片的可點(diǎn)擊性設(shè)置為可訪問性。

// HTML代碼
<img src="images/picture.jpg" alt="圖片" tabindex="0">
// CSS代碼
img {
outline: none; /* 去除默認(rèn)邊框 */
}
img:focus {
outline: 2px solid blue; /* 添加點(diǎn)擊藍(lán)色邊框 */
}

通過給圖片添加tabindex屬性，使得圖片可以被聚焦，從而為其添加點(diǎn)擊藍(lán)色邊框。