Thuộc tính phản chiếu hộp CSS
Ví dụ
Thêm hình ảnh phản chiếu bên dưới hình ảnh:
img
{
-webkit-box-reflect: below;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính box-reflect
được sử dụng để tạo sự phản chiếu của một phần tử.
Giá trị của thuộc tính box-reflect
có thể là: below
, above
, left
hoặc right
.
Lưu ý: Thuộc tính box-reflect
không chuẩn và phải được viết bằng tiền tố -webkit-
.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.webkitBoxReflect = "bên dưới" Hãy dùng thử |
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- |
Cú pháp CSS
box-reflect: none|below|above|left|right| position offset gradient |initial|inherit;
Giá trị tài sản
Property Value | Description | Demo |
---|---|---|
none | Default value. No reflection is displayed. | Demo ❯ |
below | Creates a reflection below the element. | Demo ❯ |
above | Creates a reflection above the element. | Demo ❯ |
left | Creates a reflection to the left of the element. | Demo ❯ |
right | Creates a reflection to the right of the element. | Demo ❯ |
position offset | Two value syntax: - position sets reflection below, above, left, or right of the element. - offset sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0. Read about length units |
Demo ❯ |
position offset gradient | Three value syntax: - position sets reflection below, above, left, or right of the element. - offset sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0. Read about length units - gradient sets a transition for the reflection, i.e. a fading effect. |
Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Thuộc tính box-reflect
có thể được đặt trên bất kỳ phần tử HTML hiển thị nào. Ở đây, sự phản chiếu được thực hiện bên dưới thẻ p:
p {
-webkit-box-reflect: below;
}
Hãy tự mình thử »Ví dụ
Giá trị thuộc tính box-reflect
có thể được đặt bằng cú pháp hai giá trị. Ở đây, hình ảnh phản chiếu nằm bên dưới phần tử img, nhưng có khoảng cách 70px:
img {
-webkit-box-reflect: below 70px;
}
Hãy tự mình thử »Ví dụ
Giá trị thuộc tính box-reflect
cũng có thể được đặt bằng cú pháp ba giá trị. Ở đây, hình ảnh phản chiếu nằm bên dưới phần tử img, với khoảng cách 10px và mờ dần:
img {
-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Phản chiếu hình ảnh CSS