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 |