CSS圖片點(diǎn)擊有籃框是指在圖片上添加一個(gè)點(diǎn)擊后出現(xiàn)藍(lán)色塊狀框框的效果。這種效果可以讓用戶清晰地感知到當(dāng)前點(diǎn)擊的圖片，并增強(qiáng)頁(yè)面交互性能。下面我們將介紹幾種實(shí)現(xiàn)該效果的CSS代碼。

/* 方法一：使用 :focus 偽類 */
img:focus {
outline: 2px solid blue;
}
/* 方法二：使用 :active 偽類 */
img:active {
outline: 2px solid blue;
}
/* 方法三：使用 JavaScript 實(shí)現(xiàn) */
var imgs = document.getElementsByTagName('img');
for (var i = 0; i< imgs.length; i++) {
imgs[i].onclick = function() {
this.style.outline = '2px solid blue';
return false;
}
imgs[i].onblur = function() {
this.style.outline = '';
}
}

以上代碼中，我們使用 CSS 的:focus和:active偽類分別實(shí)現(xiàn)了當(dāng)用戶點(diǎn)擊圖片時(shí)出現(xiàn)藍(lán)色邊框的效果。這兩種方法比較簡(jiǎn)單，但是僅能在用戶點(diǎn)擊圖片后出現(xiàn)效果。

如果我們想要用戶在鼠標(biāo)懸停在圖片上時(shí)也能感知到該效果，可以使用 JavaScript 來(lái)實(shí)現(xiàn)。以上代碼中，我們通過(guò)為圖片添加onclick事件來(lái)實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊圖片時(shí)出現(xiàn)效果。同時(shí)，我們還為圖片添加了onblur事件，當(dāng)圖片失去焦點(diǎn)后邊框消失。

當(dāng)然，以上代碼僅為初學(xué)者提供了一些簡(jiǎn)單的實(shí)現(xiàn)方式，實(shí)際應(yīng)用中還需根據(jù)不同情況進(jìn)行更加靈活的處理。