如何 - 縮圖
瞭解如何建立縮圖。
縮圖
縮圖是代表較大影像的小影像（點選後顯示），通常帶有邊框。
如何建立縮圖
使用 <img> 元素並用 <a> 元素包裹它。為影像設定邊框樣式並新增懸停效果。
示例
<style>
img {
border: 1px solid #ddd; /* 灰色邊框 */
border-radius: 4px; /* 圓角邊框 */
padding: 5px; /* 一些內邊距 */
width: 150px; /* 設定一個較小的寬度 */
}
/* 新增懸停效果（藍色陰影） */
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<body>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="森林">
</a>
</body>
自己動手試一試 »
訪問我們的 CSS 影像教程，瞭解更多關於如何設定影像樣式的資訊。
