Sifat clip CSS

Definisi dan penggunaan

Atribut clip memotong elemen yang didefinisikan dengan absolut.

Apa yang terjadi jika ukuran gambar lebih besar daripada elemen yang mengandungnya? Atribut "clip" memungkinkan Anda menentukan ukuran terlihat elemen, sehingga elemen ini akan dipotong dan ditampilkan dalam bentuk ini.

Keterangan

Properti ini digunakan untuk menentukan kotak pemotongan. Untuk elemen yang didefinisikan dengan absolut, konten dalam kotak pemotongan ini saja yang terlihat. Konten di luar area pemotongan ini akan ditangani berdasarkan nilai overflow. Area pemotongan ini dapat lebih besar atau lebih kecil daripada area konten.

Lihat pula:

Panduan CSS:Pengaturan lokasi CSS

Panduan HTML DOM:Atribut clip

Contoh

Potong gambar:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Coba sendiri

Sintaksu CSS

clip: auto|bentuk|initial|inherit;

Nilai atribut

Nilai Deskripsi
bentuk Atur bentuk elemen. Nilai bentuk yang sah adalah: rect (atas, kanan, bawah, kiri)
auto Nilai default. Tidak mengaplikasikan pemotongan.
inherit Ditetapkan supaya nilai clip dari elemen induk diwarisi.

Detil teknis

Nilai default: auto
Inheritsi: no
Versi: CSS2
Sintaksu JavaScript: object.style.clip="rect(0px,50px,50px,0px)"

Contoh lainnya

Atur bentuk elemen
Contoh ini menunjukkan bagaimana cara mengatur bentuk elemen. Elemen ini dipotong ke bentuk dan kemudian ditampilkan.

Dukungan browser

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

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0