如何創建：縮略圖

學習如何創建縮略圖。

縮略圖

縮略圖是代表較大圖像（單擊時）的小圖像，通常通過其周圍的邊框來識別：

Tulip

如何創建縮略圖

使用 <img> 元素并在其周圍包裹一個 <a> 元素。使用邊框設置圖像樣式并添加懸停效果：

<style>
img {
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 150px; /* Set a small width */
}
/* 添加懸停效果（藍色陰影） */
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="Forest">
</a>
</body>

親自試一試

相關頁面

教程：CSS 圖像