คุณลักษณะ clip เป็นคุณลักษณะที่ค่อนข้างมีประโยชน์ แต่มักพบได้ยากในการใช้งานจริง และ 52CSS.com ได้แนะนำคุณลักษณะนี้น้อยมาก ข้อควรทราบสองประการเมื่อใช้แอตทริบิวต์คลิป:
1. ต้องใช้แอตทริบิวต์คลิปร่วมกับตำแหน่งแอตทริบิวต์การวางตำแหน่งจึงจะมีผล
2. พิกัดการคำนวณของการครอบตัดคลิปจะคำนวณโดยเริ่มจากมุมซ้ายบน นั่นคือจุด (0,0) ดังแสดงในรูปที่ 3 ซึ่งไม่เหมือนกับการเสริมและระยะขอบของทั้งสอง มาจากจุดขวาสุดและนับจากด้านล่าง
ไวยากรณ์พื้นฐานของคุณลักษณะคลิป: 
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] คลิป : auto | .rect ( ตัวเลข ตัวเลข )
ค่า:
อัตโนมัติ: ค่าเริ่มต้น ไม่มีการตัดวัตถุ
ตรง (หมายเลข หมายเลข หมายเลข): ให้ค่าออฟเซ็ตสี่ค่าที่คำนวณจากมุมซ้ายบนของวัตถุสำหรับพิกัด (0,0) ตามลำดับบนขวา-ล่างซ้าย ค่าใดๆ เหล่านี้ สามารถแทนที่ด้วยออโต้ได้นั่นคือด้านนี้ห้ามตัด
ดึงหรือกำหนดพื้นที่ที่มองเห็นได้ของวัตถุ ชิ้นส่วนที่อยู่นอกพื้นที่รับชมมีความโปร่งใส
คุณสมบัตินี้กำหนดขนาดของพื้นที่ที่มองเห็นได้ของวัตถุที่อยู่ในตำแหน่งที่แน่นอน ค่าของคุณสมบัติตำแหน่งจะต้องตั้งค่าเป็นสัมบูรณ์เพื่อให้คุณสมบัตินี้ถูกนำมาใช้
คุณสมบัตินี้พร้อมใช้งานบนแพลตฟอร์ม MAC ที่เริ่มต้นด้วย IE5
คุณสมบัติสคริปต์ที่เกี่ยวข้องคือ clip
นอกจากการสร้างข้อความที่มีสีแล้ว คุณลักษณะ clip ใน CSS ยังสามารถครอบตัดองค์ประกอบในหน้าเว็บอื่นๆ ได้อย่างมีประสิทธิภาพอีกด้วย
แอตทริบิวต์คลิปกำหนดรูปร่างขององค์ประกอบ คุณสมบัตินี้ใช้เพื่อกำหนดสี่เหลี่ยมรูปตัด มองเห็นได้เฉพาะเนื้อหาภายในสี่เหลี่ยมผืนผ้านี้ และเนื้อหาที่อยู่นอกพื้นที่คลิปนี้ให้เอฟเฟกต์เช่นเดียวกับโอเวอร์โฟลว์:ซ่อนอยู่ พื้นที่การตัดอาจมีขนาดใหญ่หรือเล็กกว่าพื้นที่เนื้อหาขององค์ประกอบ
ค่าแอตทริบิวต์คลิป: auto | .rect (บน, ขวา, ล่าง, ซ้าย)
อัตโนมัติหมายถึงไม่มีการครอบตัด สี่ทิศทางในสี่เหลี่ยมควรเต็มไปด้วยค่าตัวเลขซึ่งระบุตำแหน่งของการครอบตัด
ด้านล่างนี้ฉันจะยกตัวอย่างง่ายๆ ของการครอบตัดรูปภาพ
ขั้นแรกให้เตรียมรูปภาพดังแสดงในรูปที่ 1 โดยมีขนาด 159px*99 พิกเซล ฉันวางแผนที่จะใช้คุณลักษณะคลิปเพื่อครอบตัดรูปภาพเพื่อให้แสดงเฉพาะจุดสีแดงขนาดใหญ่ในภาพเท่านั้น
ก่อนอื่นฉันสร้างเฟรม div เพื่อวางรูปภาพ CSS ของมันถูกกำหนดไว้ดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] #imgคลิป {
ตำแหน่ง:ญาติ;
ความกว้าง:159px;
ความสูง:99px;
พื้นหลัง:#FFF985;
ระยะขอบ:0 อัตโนมัติ;
-
คุณลักษณะการวางตำแหน่งของ div นี้ถูกตั้งค่าเป็นการวางตำแหน่งแบบสัมพัทธ์เพื่อใช้เป็นมาตรฐานการวางตำแหน่งสำหรับรูปภาพ พื้นหลังถูกกำหนดเป็น #FFF985 เพื่อให้เอฟเฟกต์การแสดงผลชัดเจนยิ่งขึ้น
จากนั้นกำหนดคุณสมบัติการครอบตัดของรูปภาพ คำจำกัดความของ CSS มีดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] #imgClip img {
ตำแหน่ง:แน่นอน;
คลิป: ตรง (21px 68px 51px 38px);
-
ตำแหน่งสัมบูรณ์ที่นี่สัมพันธ์กับ div ด้วย id ของ imgClip ค่าในคลิปจะจัดเรียงตามลำดับบน ขวา ล่าง และซ้าย
รหัสเอชทีเอ็ม:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <div id="imgClip">
<img src="" width="159" height="99" />
</div>
