圖片框css

圖片框是網頁設計中常見的元素，可以幫助圖片更好地融入頁面，并且起到美化作用。而使用 CSS 來制作圖片框，則可以實現更多的樣式效果。下面是一些圖片框的 css 代碼案例：

/* 實現圓角圖片框 */
img {
border-radius: 50%;
border: 5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
/* 實現帶有邊框和陰影的圖片框 */
img {
border: 2px solid #ddd;
padding: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
/* 實現帶有標題的圖片框 */這里是標題.img-box {
position: relative;
display: inline-block;
}
.img-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #000;
color: #fff;
text-align: center;
opacity: 0.7;
font-size: 16px;
padding: 10px;
}
.img-caption:hover {
opacity: 1;
}
/* 實現帶有陰影和懸浮效果的圖片框 */
.img-box {
position: relative;
display: inline-block;
}
.img-box:hover img {
transform: scale(1.1);
transition: transform 0.5s ease-in-out;
}
.img-box:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.img-box img {
display: block;
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
}