วิธีเพิ่มเส้นขอบคู่ด้วยสีที่ต่างกัน
หากต้องการเพิ่มเส้นขอบคู่บนรูปร่างใดๆ โดยใช้ CSS ให้คลิก “ :ก่อน ” ตัวเลือกมีชื่อเสียง มันเปลี่ยนสีของเส้นขอบทั้งสองเพื่อให้ไม่ซ้ำกัน ขั้นตอนทีละขั้นตอนด้านล่างเพื่อเพิ่มเส้นขอบคู่ด้วยสีที่ต่างกัน:
ขั้นตอนที่ 1: เพิ่มองค์ประกอบ Div และกำหนดคลาส
ในไฟล์ HTML ให้เพิ่มองค์ประกอบ div ภายในแท็ก
และกำหนด ' ระดับ ” ที่มีนามว่า “ เส้นขอบคู่ '. ผู้ใช้สามารถสร้างชื่อคลาสของตนเองได้เช่นกัน:< แผนก ระดับ = 'สองขอบ' >
< / แผนก >
ขั้นตอนที่ 2: สร้างแท็กสไตล์
ในขั้นตอนนี้ ให้สร้างส่วนสำหรับคลาส “ เส้นขอบคู่ ” และทำสำเนาหนึ่งชุดด้วยเครื่องหมาย “ :ก่อน ” ตัวเลือก ด้วยวิธีนี้ คุณสมบัติ CSS จะถูกนำไปใช้กับคลาสของเรา:
< สไตล์ >
.สองเท่า- ชายแดน {
}
.สองเท่า- ชายแดน :ก่อน {
}
< / สไตล์ >
ขั้นตอนที่ 3: เพิ่มสไตล์ให้กับชั้นเรียน
คุณสมบัติ CSS ใช้กับองค์ประกอบ div ซึ่งมีคลาสเป็น “ เส้นขอบคู่ '. สไตล์ต่อไปนี้ระบุไว้ด้านล่าง:
.สองเท่า- ชายแดน {
พื้นหลัง- สี : #ccc;
ชายแดน : 4px สีเขียวทึบ;
ช่องว่างภายใน: 50px;
ความกว้าง : 16px;
ความสูง : 16px;
ตำแหน่ง: ญาติ;
ขอบ: 0 รถยนต์;
}
คำอธิบายของคุณสมบัติ CSS ได้รับด้านล่าง:
- ขั้นแรก ให้เพิ่ม “ สีพื้นหลัง ” ซึ่งเป็นสีเทาและ “ ชายแดน ” ของน้ำหนัก 4px และสีเขียว
- “ การขยายความ ” ของ 50px เพื่อสร้างพื้นที่ภายใน 50px จากทุกด้าน
- ในที่สุด “ ความกว้าง ' และ ' ความสูง' ของ 16px นอกจากนี้ “ ขอบ ” เป็น 0 อัตโนมัติ ซึ่งหมายถึงระยะขอบบนและล่างจะเป็นศูนย์และชิดซ้าย
หน้าเว็บมีลักษณะดังนี้:
ผลลัพธ์แสดงว่าเส้นขอบถูกนำไปใช้กับ 'div'
ขั้นตอนที่ 4: การเพิ่ม CSS Selector
ตอนนี้ ย้ายไปที่ช่องที่สองในแท็กสไตล์ที่มี ' :ก่อน ” แนบตัวเลือก และเขียนโค้ดด้านล่าง:
.สองเท่า- ชายแดน :ก่อน {พื้นหลัง : ไม่มี;
ชายแดน : 4px สีน้ำเงินทึบ;
เนื้อหา : '' ;
ตำแหน่ง: แน่นอน;
ด้านบน: 4px;
ซ้าย: 4px;
ขวา: 4px;
ด้านล่าง: 4px;
}
อธิบายคุณสมบัติด้านล่าง:
- ใช้ ' ตำแหน่ง ” คุณสมบัติเพื่อทำให้ตำแหน่งขององค์ประกอบคงที่
- หลังจากนั้น “ บน ซ้าย ขวา และล่าง ” กำหนดระยะขอบของรายการที่สร้างขึ้นใหม่จากรายการเดิม
- ตัวเลือก CSS เรียกว่า “: ก่อน ” เพิ่มเนื้อหาหน้าองค์ประกอบที่เลือก
ผลลัพธ์มีลักษณะดังนี้:
นั่นคือวิธีที่สามารถเพิ่มเส้นขอบคู่โดยใช้สีที่ต่างกันได้
บทสรุป
หากต้องการเพิ่มเส้นขอบคู่ ให้สร้างองค์ประกอบ div ก่อนแล้วกำหนดให้กับคลาส จากนั้นเพิ่ม CSS “ ตำแหน่ง ” คุณสมบัติที่ต้องตั้งค่าเป็นญาติ หลังจากนั้น ให้เพิ่ม CSS Selector “:before” เพื่อให้ผู้ใช้สามารถเพิ่มเนื้อหาก่อนองค์ประกอบที่เลือกได้ คู่มือนี้ได้สาธิตการใช้เส้นขอบสองชั้นด้วยสีต่างๆ