CÁCH THỨC - Hình thu nhỏ
Tìm hiểu cách tạo hình ảnh thu nhỏ.
Hình ảnh thu nhỏ
Hình thu nhỏ là hình ảnh nhỏ đại diện cho hình ảnh lớn hơn (khi được nhấp vào) và thường được nhận dạng với đường viền xung quanh:
Cách tạo hình ảnh thu nhỏ
Sử dụng một phần tử <img> và quấn một phần tử <a> xung quanh nó. Tạo kiểu cho hình ảnh bằng đường viền và thêm hiệu ứng di chuột:
Thí dụ
<style>
img {
border: 1px solid #ddd; /* Gray
border */
border-radius: 4px; /* Rounded border */
padding: 5px; /* Some padding */
width: 150px; /* Set a
small width */
}
/* Add a hover effect (blue shadow) */
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>
Đi tới Hướng dẫn về hình ảnh CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho hình ảnh.