Properti clip CSS

Definisi dan penggunaan

Properti clip memotong elemen yang didefinisikan dengan absolute.

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

Keterangan

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

Lihat juga:

Panduan CSS:Posisi CSS

Panduan HTML DOM:Properti clip

Contoh

Potong gambar:

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

Coba sendiri

Syntaks CSS

clip: auto|bentuk|initial|inherit;

Nilai properti

Nilai Deskripsi
bentuk Mengatur bentuk elemen. Nilai bentuk yang sah hanya: rect (atas, kanan, bawah, kiri)
auto Nilai standar. Tidak diterapkan pengurangan.
inherit Ditetapkan supaya nilai clip dari родительского элемента diturunkan.

Detil teknis

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

Contoh lainnya

Mengatur bentuk elemen
Contoh ini menunjukkan bagaimana cara mengatur bentuk elemen. Elemen ini disecutkan ke bentuk dan kemudian ditampilkan.

Dukungan browser

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

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