Atribut clip adalah atribut yang relatif berguna, namun sering kali jarang ditemukan dalam aplikasi praktis, dan 52CSS.com hanya memperkenalkan sedikit atribut tersebut. Dua hal yang perlu diperhatikan saat menerapkan atribut clip:
1. Atribut klip harus digunakan bersama dengan atribut positioning agar dapat diterapkan.
2. Koordinat perhitungan clip cropping dihitung mulai dari pojok kiri atas yaitu titik (0,0), seperti terlihat pada Gambar 3. Berbeda dengan padding dan margin mereka dari titik paling kanan dan menghitung dari bawah.
Sintaks dasar atribut klip: 
Contoh Kode Sumber
[www.downcodes.com] klip : otomatis |. rect ( nomor nomor nomor nomor )
Nilai:
otomatis: nilai default. Tidak ada kliping objek
rect (nomor nomor nomor nomor): Memberikan empat nilai offset yang dihitung dari sudut kiri atas objek untuk koordinat (0,0) dalam urutan kanan atas-kiri bawah Bisa diganti dengan auto yaitu sisi ini jangan dipotong
Mengambil atau mengatur area terlihat suatu objek. Bagian di luar area tampilan transparan.
Properti ini menentukan ukuran area terlihat dari objek yang diposisikan secara absolut. Nilai properti position harus disetel ke absolut agar properti ini dapat digunakan.
Properti ini tersedia pada platform MAC yang dimulai dengan IE5.
Properti skrip yang sesuai adalah clip .
Selain membuat teks berwarna, atribut clip di CSS juga dapat memotong elemen di halaman web lain secara efektif.
Atribut clip mengatur bentuk elemen. Properti ini digunakan untuk mendefinisikan persegi panjang kliping. Hanya konten di dalam persegi panjang ini yang terlihat, dan konten di luar area kliping ini memiliki efek yang sama seperti overflow:hidden. Area kliping mungkin lebih besar atau lebih kecil dari area konten elemen.
nilai atribut klip: otomatis |.persegi (atas, kanan, bawah, kiri)
Otomatis berarti tidak ada pemotongan. Keempat arah pada persegi harus diisi dengan nilai numerik yang menunjukkan posisi pemotongan.
Dibawah ini saya akan memberikan contoh sederhana cropping gambar.
Pertama siapkan gambarnya, seperti terlihat pada Gambar 1, ukurannya 159px*99 piksel. Saya berencana menggunakan atribut clip untuk memotong gambar sehingga hanya titik merah besar pada gambar yang ditampilkan.
Saya pertama kali membuat bingkai div untuk menempatkan gambar. CSS-nya didefinisikan sebagai berikut:
Contoh Kode Sumber
[www.downcodes.com] #imgKlip {
posisi:relatif;
lebar:159 piksel;
tinggi:99 piksel;
latar belakang:#FFF985;
margin:0 otomatis;
}
Atribut pemosisian div ini diatur ke pemosisian relatif untuk menggunakannya sebagai standar pemosisian gambar. Latar belakang didefinisikan sebagai #FFF985 untuk membuat efek tampilan lebih jelas.
Kemudian tentukan properti cropping pada gambar. Definisi CSSnya adalah sebagai berikut:
Contoh Kode Sumber
[www.downcodes.com] #imgKlip img {
posisi:mutlak;
klip:persegi(21px 68px 51px 38px);
}
Posisi absolut di sini adalah relatif terhadap div dengan id imgClip. Nilai-nilai dalam klip disusun dalam urutan atas, kanan, bawah, dan kiri.
kode html:
Contoh Kode Sumber
[www.downcodes.com] <div id="imgKlip">
<img src="" lebar="159" tinggi="99" />
</div>
