在網(wǎng)頁設(shè)計(jì)中，經(jīng)常遇到需要在圖片上添加點(diǎn)擊效果的情況。比如鼠標(biāo)移動(dòng)到圖片上時(shí)圖片會(huì)有放大或變暗的效果，或者在點(diǎn)擊圖片時(shí)它會(huì)凸出來。這篇文章將會(huì)介紹如何使用 CSS 點(diǎn)擊圖片凸出來。

.image-container {
position: relative;
display: inline-block;
overflow: hidden;
}
.image {
display: block;
max-width: 100%;
height: auto;
transition: transform 0.2s ease-out;
}
.image:hover,
.image:focus {
transform: scale(1.1);
z-index: 1;
outline: none;
}

首先，在 HTML 中創(chuàng)建圖片容器，并為它設(shè)置相對(duì)定位，用來嵌套圖片。在圖片樣式中，為它設(shè)置最大寬度、自動(dòng)高度和一個(gè)過渡效果，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，使用 CSS 的 :hover 偽類使它有放大的效果。此外還設(shè)置了一個(gè) :focus 的樣式，用來在用戶點(diǎn)擊圖片時(shí)產(chǎn)生凸出的效果。

最后，通過使用 transform 屬性來改變圖片的比例大小，造成凸出的效果。同時(shí)，使用 z-index 屬性使圖片置于其他內(nèi)容的頂部，并使用 outline 屬性去掉圖片被點(diǎn)擊時(shí)的虛線邊框。

總結(jié)一下，通過上面的代碼，我們可以輕松地實(shí)現(xiàn)點(diǎn)擊圖片凸出來的效果。希望這篇文章對(duì)你有所幫助！