ใช่ เรารู้: เราสามารถกำหนดความกว้างของเส้นขอบได้ ความกว้างของเส้นขอบอาจเป็น 5px, 10px, 20px หรือค่าใดก็ได้
อย่างไรก็ตาม คุณเคยคิดบ้างไหมว่าคุณสามารถตั้งค่าสีแยกให้กับเส้นขอบขนาด 1px แต่ละอันได้ แนวคิดนี้คืออะไร? กล่าวคือ หากคุณตั้งค่าเส้นขอบ 10px สำหรับองค์ประกอบ คุณจะสามารถตั้งค่า 10 สีสำหรับพื้นที่เส้นขอบ 10px นี้ แต่ละ 1px เป็นเลเยอร์ (กลุ่ม) การสาธิต: คำอธิบายโดยละเอียดของสีเส้นขอบหลายชุดในสีเส้นขอบ CSS3
เรามาทบทวนวิธีการตั้งค่าขนาดเส้นขอบสำหรับองค์ประกอบต่างๆ (บล็อกโค้ด 1):
โค้ดด้านบนบ่งชี้ว่าเราได้กำหนดเส้นขอบ 6px สำหรับองค์ประกอบ div ด้วยการทดสอบ className แน่นอนว่านี่คือสี่เหลี่ยมผืนผ้าที่มี 4 ด้าน
ดังนั้นโค้ด CSS นี้จึงสามารถปรับแต่งได้จริง (โค้ดบล็อก 2):
จากโค้ดที่ปรับปรุงแล้ว เราพบว่าเราสามารถกำหนดสีให้กับด้านทั้งสี่ของสี่เหลี่ยมผืนผ้าได้จริงๆ ส่วนว่าควรตั้งค่าสีให้เหมือนหรือต่างกันนั้น ขึ้นอยู่กับความต้องการของคุณเอง
เมื่อคุณเรียกใช้โค้ดที่ได้รับการปรับแต่ง (แน่นอนว่าคุณสามารถเปลี่ยนสีของแต่ละด้านได้) คุณจะเห็นสี่เหลี่ยมที่มีเส้นขอบสีดำขนาด 6px นี่คือสิ่งที่เราคาดหวัง
อย่างไรก็ตาม ขณะนี้ เราสามารถแบ่งเส้นขอบ 6px ออกเป็น 6 กลุ่มได้ โดยแต่ละ 1px เป็นกลุ่มเดียว ดังนั้นแต่ละเส้นขอบจึงสามารถตั้งค่าสีที่แตกต่างกันได้สูงสุด 6 สี
ทำอย่างไร? ลองดู (โค้ดบล็อคสาม):
.ทดสอบ{
เส้นขอบกว้าง: 6px;
สไตล์เส้นขอบ: ทึบ;
ขอบสีด้านบน:#000 #fff #999 #aaa #ccc #eee;
เส้นขอบขวาสี:#000 #fff #999 #aaa #ccc #eee;
ขอบล่างสี:#000 #fff #999 #aaa #ccc #eee;
ขอบซ้ายสี:#000 #fff #999 #aaa #ccc #eee;
-
.ทดสอบ{
เส้นขอบกว้าง: 6px;
สไตล์เส้นขอบ: ทึบ;
ขอบสีด้านบน:#000;
ขอบขวาสี:#000;
ขอบล่างสี:#000;
ขอบซ้ายสี:#000;
-
.ทดสอบ{
เส้นขอบ: 6px ทึบ #000;
-
<div class="test">ทดสอบการตั้งค่าสีเส้นขอบ</div>