Phản chiếu hình ảnh CSS
Trong chương này bạn sẽ học cách phản ánh một hình ảnh.
Phản chiếu hình ảnh CSS
Thuộc tính box-reflect
được sử dụng để tạo sự phản chiếu hình ảnh.
Giá trị của thuộc tính box-reflect
có thể là: below
, above
, left
hoặc right
.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Ví dụ
Ví dụ
Ở đây chúng tôi muốn sự phản chiếu bên dưới hình ảnh:
img {
-webkit-box-reflect: below;
}
Hãy tự mình thử »Ví dụ
Ở đây chúng tôi muốn sự phản chiếu ở bên phải của hình ảnh:
img {
-webkit-box-reflect: right;
}
Hãy tự mình thử »Độ lệch phản chiếu CSS
Để chỉ định khoảng cách giữa hình ảnh và hình ảnh phản chiếu, hãy thêm kích thước của khoảng cách vào thuộc tính box-reflect
.
Ví dụ
Ở đây chúng tôi muốn hình ảnh phản chiếu bên dưới hình ảnh, với độ lệch 20px:
img {
-webkit-box-reflect: below 20px;
}
Hãy tự mình thử »Phản chiếu CSS với độ dốc
Chúng ta cũng có thể tạo hiệu ứng mờ dần trên hình phản chiếu.
Ví dụ
Tạo hiệu ứng mờ dần trên hình phản chiếu:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}
Hãy tự mình thử »