ใช้ css2.1 เพื่อให้ได้พื้นหลังหลายแบบและเอฟเฟกต์เส้นขอบหลายแบบ
ใช้ CSS2.1 เพื่อให้ได้เอฟเฟกต์ของภาพพื้นหลัง 3 รูปและรูปภาพเนื้อหา 2 รูปในองค์ประกอบ HTML เดียว หรือเอฟเฟกต์ของหลายเส้นขอบ วิธีการเพิ่มประสิทธิภาพแบบก้าวหน้านี้ใช้กับเบราว์เซอร์ทั้งหมดที่รองรับองค์ประกอบหลอก CSS2.1 และแอตทริบิวต์การวางตำแหน่ง ไม่จำเป็นต้องรองรับ CSS3
สาธิต: หลายพื้นหลังโดยใช้ CSS2.1
สาธิต: Polyborder โดยใช้ CSS2.1
เบราว์เซอร์ที่รองรับ: Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+
สิ่งนี้สำเร็จได้อย่างไร?
โดยพื้นฐานแล้ว วัตถุหลอกที่เราสร้าง (:ก่อนและ :หลัง) จะเหมือนกับวิธีที่เราปฏิบัติต่อองค์ประกอบ HTML ที่ซ้อนกัน แต่มีข้อได้เปรียบที่ไม่เหมือนใครเหนือองค์ประกอบ HTML ที่ซ้อนกัน - ไม่ใช่ความหมาย
เมื่อใช้หลายพื้นหลังหรือหลายเส้นขอบ เราจำเป็นต้องแก้ไขเนื้อหาของเลเยอร์องค์ประกอบหลอกที่อยู่ด้านหลังเนื้อหาขององค์ประกอบ HTML โดยใช้ตำแหน่งที่แน่นอน
เนื้อหาที่ไม่ใช่ของจริงมีอยู่ในองค์ประกอบหลอกเพื่อวางตำแหน่ง ซึ่งหมายความว่าสามารถขยายได้อย่างอิสระภายในขอบเขตขององค์ประกอบ "พาเรนต์" โดยไม่กระทบต่อเนื้อหา สิ่งนี้สามารถรวมค่าของด้านบน, ขวา, ล่าง, ซ้าย, ความกว้างและความสูงของตำแหน่งที่แน่นอนได้โดยพลการ สิ่งสำคัญคือประสิทธิภาพการรวมกันนั้นมีความยืดหยุ่น
ผลกระทบอะไรที่สามารถทำได้?
คุณจะต้องพึ่งพาองค์ประกอบ HTML เดียวและรูปภาพที่เกี่ยวข้องเพื่อสร้างสิ่งต่าง ๆ เช่น สีพื้นหลังหลายสี, ภาพพื้นหลังหลายรูป, การตัดภาพพื้นหลัง, การพลิกรูปภาพ, โมเดลกล่องที่ขยายได้โดยใช้เส้นขอบรูปภาพ และคอลัมน์ปลอมแบบลอย (หมายเหตุของ Xiaozhi: คอลัมน์สามคอลัมน์ เอฟเฟ็กต์ที่มีความสูงเท่ากัน (ซึ่งจะกล่าวถึงในภายหลัง) รูปภาพนอกกรอบโมเดล การแสดงขอบหลายขอบด้านนอก และเอฟเฟกต์ยอดนิยมอื่น ๆ อาจต้องมีรูปภาพเนื้อหาเพิ่มเติม 2 ภาพในเนื้อหาที่สร้างขึ้น
พื้นหลังหลายแบบที่ใช้ CSS2.1 และหลายเส้นขอบโดยใช้หน้าสาธิต CSS2.1 จะแสดงวิธีการใช้เทคโนโลยีหลอกวัตถุ CSS2.1 เพื่อให้ได้เอฟเฟกต์ยอดนิยมเหล่านี้
โครงสร้างส่วนใหญ่มีองค์ประกอบลูก ดังนั้น บ่อยครั้ง คุณจะสามารถแสดงเอฟเฟกต์ได้มากขึ้นผ่านองค์ประกอบหลอกที่เป็นองค์ประกอบลูกแรกขององค์ประกอบหลัก (ตั้งค่าให้เป็นองค์ประกอบลูกสุดท้าย) นอกจากนี้คุณยังสามารถใช้ :hover เพื่อสร้างเอฟเฟกต์เชิงโต้ตอบที่ซับซ้อนให้กับสไตล์ได้อีกด้วย