บทความนี้จะแนะนำคุณสมบัติ CSS ที่มีประโยชน์ 5 ประการ คุณควรจะคุ้นเคยแต่อาจจะไม่ค่อยได้ใช้มัน ฉันไม่ได้หมายถึงการมองไปข้างหน้าถึงคุณสมบัติ CSS3 ใหม่ ฉันกำลังพูดถึงคุณสมบัติ CSS2 แบบเก่า เช่น คลิป ความสูงขั้นต่ำ พื้นที่สีขาว เคอร์เซอร์ และจอแสดงผลที่ได้รับการสนับสนุนอย่างกว้างขวางจากเบราว์เซอร์ทั้งหมด ดังนั้นอย่าพลาดบทความนี้เพราะคุณอาจพบว่ามีประโยชน์มาก
1. คลิป CSS
คุณสมบัติคลิปเป็นเหมือนหน้ากาก ช่วยให้คุณสามารถมาสก์เนื้อหาขององค์ประกอบของหน้าโดยใช้สี่เหลี่ยม ในการตัดองค์ประกอบ: คุณต้องระบุคุณสมบัติตำแหน่งเป็นค่าสัมบูรณ์ จากนั้นระบุค่าบน ขวา ล่าง และซ้ายที่สัมพันธ์กับองค์ประกอบ
.gif)
ตัวอย่างการตัดภาพ ( สาธิต )
ตัวอย่างต่อไปนี้สาธิตวิธีการใช้คุณสมบัติคลิปเพื่อมาสก์รูปภาพ ขั้นแรก ระบุองค์ประกอบ
.gif)
.คลิป {
ตำแหน่ง: ญาติ;
ความสูง: 130px;
ความกว้าง: 200px;
เส้นขอบ: ทึบ 1px #ccc;
-
.คลิป img {
ตำแหน่ง: แน่นอน;
คลิป: ตรง (30px 165px 100px 30px);
-
การปรับขนาดและการตัดภาพ ( สาธิต )
ในตัวอย่างนี้ ฉันจะแสดงวิธีปรับขนาดและครอบตัดรูปภาพ รูปภาพสต็อกเป็นรูปสี่เหลี่ยมผืนผ้า และฉันต้องการลดขนาดลงเหลือ 50% ของขนาดเพื่อสร้างภาพขนาดย่อในรูปแบบสี่เหลี่ยมจัตุรัส ดังนั้นฉันจึงใช้คุณสมบัติความกว้างและความสูงเพื่อปรับขนาดรูปภาพ และใช้คุณสมบัติคลิปเพื่อมาสก์ จากนั้นใช้แอตทริบิวต์ left เพื่อย้ายรูปภาพ 15px ไปทางซ้าย
.gif)
-
แกลเลอรี่ลี {
ลอย: ซ้าย;
ระยะขอบ: 0 10px 0 0;
ตำแหน่ง: ญาติ;
ความกว้าง: 70px;
ความสูง: 70px;
เส้นขอบ: ทึบ 1px #000;
-
.gallery img {
ความกว้าง: 100px;
ความสูง: 70px;
ตำแหน่ง: แน่นอน;
คลิป: ตรง (0 85px 70px 15px);
ซ้าย: -15px;
-