Tạo hiệu ứng viền và bóng mờ cho hình ảnh với CSS3

Cập nhật lần cuối: 22/12/2016 lúc 09:02:04

Thể loại: Thiết kế Web

Trong bài viết, chúng ta sẽ sử dụng hai thuộc tính border-radius và box-shadow trong CSS3 để trang trí và làm cho hình ảnh trở nên bắt mắt hơn.

Đầu tiên, bạn định nghĩa phong cách cho hình ảnh như sau:

img
{
     border: 1px solid #ddd;
     border-radius: 4px;
     padding: 5px;
}
img:hover
{
     box-shadow: 1px 1px 1px grey;
}

Hình ảnh sẽ có phong cách là 1 đường viền nét liền tông màu xám nhạt (#ddd). Khoảng cách giữa hình ảnh và đường viền là 5 pixels được định nghĩa thông qua thuộc tính padding:5px. Khi rê chuột lên (img:hover) thì hình ảnh sẽ thay đổi phong cách có thêm 1 bóng mờ màu xám.

Tiếp đến bạn định nghĩa hình ảnh bằng thẻ <img> và phần tử <a> bọc bên ngoài để tạo liên kết và hiệu ứng khi rê chuột lên hình ảnh.

<a href="test1.html"><img src="girl.jpg" alt="Girl"></a>
<a href="test2.html"><img src="swim.jpg" alt="Swim"></a>

Kết quả: Hình bên trái có bóng mờ khi rê chuột lên, hình bên phải chỉ có đường viền.

Toàn bộ mã nguồn:

<!DOCTYPE html>
<html>
<head>
	<title>Image with CSS3</title>
	<style>
	img 
	{
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 5px;
	}
	img:hover
	{
		box-shadow: 1px 1px 1px grey;
	}
	</style>
</head>
<body>
	<a href="test1.html"><img src="girl.jpg" alt="Girl"></a>
	&nbsp;
	<a href="test2.html"><img src="swim.jpg" alt="Swim"></a>
</body>
</html>

Ngoài ra, bạn có thể kết hợp nhiều thuộc tính khác để tạo hình ảnh như mong muốn.

Kênh YouTube: https://www.youtube.com/user/Dammio

Liên quan: Cách sử dụng thuộc tính border-radius trong thiết kế menu

Trích dẫn bài viết

APA:
Dammio. (2016). Tạo hiệu ứng viền và bóng mờ cho hình ảnh với CSS3. https://www.dammio.com/2016/09/28/tao-hieu-ung-vien-va-bong-mo-cho-hinh-anh-voi-css3.
BibTeX:
@misc{dammio, author = {Dammio}, title = {Tạo hiệu ứng viền và bóng mờ cho hình ảnh với CSS3}, year = {2016}, url = {https://www.dammio.com/2016/09/28/tao-hieu-ung-vien-va-bong-mo-cho-hinh-anh-voi-css3}, urldate = {2025-04-18} }

Kết nối