Properti box-reflect CSS

定义和用法

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

box-reflect 属性的值可以是：

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

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

实例

Contoh 1

Menambah efek refleksi di bawah gambar:

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

Coba sendiri

Contoh 2

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

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

Coba sendiri

Contoh 3

box-reflect Properti ini dapat digunakan dengan sintaks dua nilai. Contoh berikut membuat efek refleksi di bawah gambar, dan mengatur jarak 70px:

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

Coba sendiri

Contoh 4

box-reflect Properti ini dapat digunakan dengan sintaks tiga nilai. Contoh berikut membuat efek refleksi di bawah gambar, mengatur jarak 10px, dan mencahayaan 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 properti

Nilai Deskripsi
none Nilai default. efek refleksi tidak ditampilkan.
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 Atur posisi refleksi (below, above, left, atau right).
  • offset Atur jarak refleksi. Jarak dapat menggunakan satuan px, pt, cm, dll. Nilai defaultnya adalah 0.
position offset gradient

Syntaks tiga nilai:

  • position Atur posisi refleksi (below, above, left, atau right).
  • offset Atur jarak refleksi. Jarak dapat menggunakan satuan px, pt, cm, dll. Nilai defaultnya adalah 0.
  • gradient Atur efek transisi refleksi, seperti efek pencahayaan.
initial Atur properti ini ke nilai default. Lihat initial.
inherit Mengambil properti ini dari elemen orangtua. Lihat inherit.

Detil teknis

Nilai default: none
Inheritsi: tidak
Pembuatan animasi: tidak didukung. Lihat:Properti berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.webkitBoxReflect="below"

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini penuhnya.

Angka yang diikuti dengan -webkit- prefix menunjukkan versi pertama yang mendukung prefix ini.

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