1. Cách phản chiếu hình ảnh trong CSS

Thuộc tính box-reflect trong CSS được sử dụng để tạo hình ảnh phản chiếu cho hình ảnh ban đầu

Giá trị của thuộc tính box-reflect gồm các giá trị sau:

  • below : hình ảnh phản chiếu nằm bên dưới hình ảnh gốc
  • above : hình ảnh phản chiếu nằm bên trên hình ảnh gốc
  • left : hình ảnh phản chiếu nằm bên trái hình ảnh gốc
  • right : hình ảnh phản chiếu nằm bên phải hình ảnh gốc

Ví dụ:

2. Tùy chỉnh khoảng cách giữa hình ảnh gốc và hình ảnh phàn chiếu trong CSS

Để tùy chỉnh khoảng cách giữa hình ảnh gốc và hình ảnh phản chiếu trong CSS, chúng ta cần thêm kích thước của khoảng cách vào thuộc tính box-reflect

Ví dụ:

3. Sử dụng hình ảnh phản chiếu kết hợp với thuộc tính Gradient trong CSS

Chúng ta cũng có thể tạo hiệu ứng mờ dần trên hình phản chiếu bằng cách kết hợp với thuộc tính Gradient

Ví dụ:

4. Các trình duyệt hỗ trợ

Thuộc tính
-webkit-box-reflect 4.0 79.0 Không hỗ trợ 4.0 15.0