Bạn có thể sử dụng một số cách style CSS cho ảnh để làm cho chúng trở nên khác biệt, ấn tượng hơn so với những bức ảnh thông thường. Hãy cùng xem xét một vài cách sau.

1. Sử dụng thuộc tính box-shadow

Ta có thể sử dụng thuộc tính box-shadow để thêm hiệu ứng đổ bóng cho các bức ảnh hoặc nút bấm.

img {
  box-shadow: 8px 8px 10px #aaa;
}

2. Sử dụng thuộc tính border

Bạn cũng có thể sử dụng thuộc tính border để trang trí cho bức ảnh

Img {
   border: 15px solid #3e2b14;
  padding: 10px;
}

3. Sử dụng thuộc tính border-radius

Nếu bạn muốn phá cách không còn giữ lại hình dạng vuông vức của bức ảnh, thuộc tính border-radius chính là thứ bạn cần

img {
  border-radius: 30px;  // partially rounded corners
}
 
img {
  border-radius: 100%; // full circular image
}

4. Sử dụng thuộc tính opacity

Nếu bạn muốn trình diễn một bức ảnh với màu sắc trong suốt, thuộc tính opacity rất hữu ích.

img {
  opacity: 0.5;
}

5. Sử dụng thuộc tính linear-gradient

Và cuối cùng, bạn có thể tạo hiệu ứng photo-filter với thuộc tính linear-gradient

.imageDiv {
  background-image:
	linear-gradient(
  	rgba(0, 0, 0, 0.5),
  	rgba(0, 0, 0, 0.5)
	),
   background: url(“images/rust.png”);
}

Cám ơn các bạn đã đọc bài viết! Source: https://www.godaddy.com/garage/webpro/design/6-simple-css-tricks-for-images/