Thuộc tính box-reflect CSS

Định nghĩa và cách sử dụng

box-reflect thuộc tính được sử dụng để tạo hiệu ứng phản xạ của phần tử.

box-reflect giá trị của thuộc tính có thể là:

• below(dưới cùng)
• above(trên cùng)
• left(bên trái)
• right(bên phải)

Lưu ý:box-reflect thuộc tính không phải là thuộc tính tiêu chuẩn, phải sử dụng -webkit- tiền tố.

thí dụ

Ví dụ 1

Thêm hiệu ứng phản xạ dưới hình ảnh:

img {
  -webkit-box-reflect: dưới;
}

Thử nghiệm trực tiếp

Ví dụ 2

box-reflect Thuộc tính có thể áp dụng cho bất kỳ phần tử HTML có thể nhìn thấy nào. Ví dụ sau tạo hiệu ứng phản xạ dưới thẻ <p>:

p {
  -webkit-box-reflect: dưới;
}

Thử nghiệm trực tiếp

Ví dụ 3

box-reflect Thuộc tính có thể sử dụng ngữ pháp hai giá trị. Ví dụ sau tạo hiệu ứng phản xạ dưới hình ảnh và đặt khoảng cách là 70px:

img {
  -webkit-box-reflect: dưới 70px;
}

Thử nghiệm trực tiếp

Ví dụ 4

box-reflect Thuộc tính có thể sử dụng ngữ pháp ba giá trị. Ví dụ sau tạo hiệu ứng phản xạ dưới hình ảnh, đặt khoảng cách là 10px và mờ ra dần:

img {
  -webkit-box-reflect: dưới 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

Thử nghiệm trực tiếp

Ngữ pháp CSS

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Số liệu có tiền tố -webkit- biểu thị phiên bản đầu tiên hỗ trợ tiền tố này.