Cách thực hiện - 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à một hình ảnh nhỏ thể hiện hình ảnh lớn hơn (khi được nhấp vào) và thường được nhận dạng bằng đường viền xung quanh:
Cách tạo hình ảnh thu nhỏ
Sử dụng phần tử <img> và bọc phần tử <a> xung quanh nó. Tạo kiểu cho hình ảnh có viền và thêm hiệu ứng di chuột:
Ví 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>
Hãy tự mình thử »Hãy xem 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.