CSS是一種樣式表語(yǔ)言，可以用來(lái)控制網(wǎng)頁(yè)中的布局和外觀。在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常需要讓圖片在被點(diǎn)擊時(shí)放大，提高用戶體驗(yàn)。下面我們來(lái)學(xué)習(xí)一下如何使用CSS實(shí)現(xiàn)這一效果。

/*先定義圖片的初始大小和邊框樣式*/
img {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
/*當(dāng)圖片被點(diǎn)擊時(shí)，顯示為放大狀態(tài)*/
img:active {
width: 400px;
height: 400px;
border: 2px solid #333;
/*以下是為了讓圖片居中*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上代碼的意思是，首先定義圖片的初始大小和邊框樣式。當(dāng)圖片被點(diǎn)擊時(shí)，使用CSS的偽類(lèi)":active"，將圖片的大小修改為放大狀態(tài)，并修改圖片的邊框，使得圖片更加突出。最后使用CSS的定位和transform屬性使得圖片居中顯示。

我們可以將上述代碼添加到HTML文件的