Sifat box-reflect CSS

定义和用法

box-reflect 属性用于创建元素的反射效果。

box-reflect 属性的值可以是：

  • below（下方）
  • above（上方）
  • left（左侧）
  • right（右侧）

注意：box-reflect 属性是非标准属性，必须使用 -webkit- 前缀。

实例

Contoh 1

Menambahkan efek refleksi di bawah gambar:

img {
  -webkit-box-reflect: below;
}

Coba sendiri

Contoh 2

box-reflect Atribut ini dapat diterapkan pada setiap elemen HTML yang terlihat. Contoh di bawah ini membuat efek refleksi di bawah tag <p>:

p {
  -webkit-box-reflect: below;
}

Coba sendiri

Contoh 3

box-reflect Atribut ini dapat digunakan dengan syntaks dua nilai. Contoh di bawah ini membuat efek refleksi di bawah gambar, dan menetapkan jarak 70px:

img {
  -webkit-box-reflect: below 70px;
}

Coba sendiri

Contoh 4

box-reflect Atribut ini dapat digunakan dengan syntaks tiga nilai. Contoh di bawah ini membuat efek refleksi di bawah gambar, menetapkan jarak 10px, dan mengurangi pencahayaan secara perlahan:

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

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
none Nilai baku. Tidak menampilkan efek refleksi.
below Membuat efek refleksi di sebelah bawah elemen.
above Membuat efek refleksi di sebelah atas elemen.
left Membuat efek refleksi di sebelah kiri elemen.
right Membuat efek refleksi di sebelah kanan elemen.
position offset

Syntaks dua nilai:

  • position Setel lokasi refleksi (below, above, left, atau right).
  • offset Setel jarak refleksi. Jarak dapat menggunakan satuan px, pt, cm, dan sebagainya. Nilai baku adalah 0.
position offset gradient

Syntaks tiga nilai:

  • position Setel lokasi refleksi (below, above, left, atau right).
  • offset Setel jarak refleksi. Jarak dapat menggunakan satuan px, pt, cm, dan sebagainya. Nilai baku adalah 0.
  • gradient Setel efek transisi refleksi, seperti efek pencahayaan keluar.
initial Setel atribut ini ke nilai baku. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknologi

Nilai baku: none
Ketergantungan: tidak
Pembuatan animasi: tidak disokong. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.webkitBoxReflect="below"

Dukungan browser

Angka di dalam tabel menunjukkan versi pertama browser yang mendukung sifat ini sepenuhnya.

Angka dengan awalan -webkit- menunjukkan versi pertama yang mendukung awalan ini.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- tidak disokong 4.0 -webkit- 15.0 -webkit-