-webkit-box-reflect
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Thuộc tính CSS -webkit-box-reflect cho phép bạn phản chiếu nội dung của một phần tử theo một hướng cụ thể.
Cú pháp
css
/* Giá trị hướng */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;
/* Giá trị độ lệch */
-webkit-box-reflect: below 10px;
/* Giá trị mặt nạ */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* Giá trị toàn cục */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: revert;
-webkit-box-reflect: revert-layer;
-webkit-box-reflect: unset;
Giá trị
above,below,right,left-
Là các từ khóa chỉ định hướng phản chiếu xảy ra.
<length>-
Chỉ định kích thước của phần phản chiếu.
<image>-
Mô tả mặt nạ được áp dụng cho phần phản chiếu.
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
-webkit-box-reflect =
[ above | below | right | left ]? <length>? <image>?
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào. Cách tiêu chuẩn để tạo phản chiếu trong CSS là sử dụng hàm CSS element().