CSS Border Sides
CSS Border - แต่ละด้าน
จากตัวอย่างในหน้าก่อนหน้านี้ คุณจะเห็นว่าสามารถระบุเส้นขอบที่แตกต่างกันสำหรับแต่ละด้านได้
ใน CSS ยังมีคุณสมบัติสำหรับระบุเส้นขอบแต่ละอัน (บน ขวา ล่าง และซ้าย):
ตัวอย่าง
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
ผลลัพธ์:
Different Border Styles
ตัวอย่างข้างต้นให้ผลลัพธ์เช่นเดียวกับสิ่งนี้:
ตัวอย่าง
p {
border-style: dotted solid;
}
นี่คือวิธีการทำงาน:
หากborder-styleคุณสมบัติมีค่าสี่ค่า:
- สไตล์เส้นขอบ: ประทึบคู่ประ;
- ขอบบนเป็นเส้นประ
- ขอบขวาแข็ง
- ขอบล่างเป็นสองเท่า
- ขอบซ้ายเป็นเส้นประ
หากborder-styleคุณสมบัติมีสามค่า:
- สไตล์เส้นขอบ: จุดคู่ทึบ;
- ขอบบนเป็นเส้นประ
- ขอบขวาและซ้ายเป็นของแข็ง
- ขอบล่างเป็นสองเท่า
หากborder-styleคุณสมบัติมีสองค่า:
- สไตล์เส้นขอบ: จุดแข็ง;
- ขอบบนและล่างเป็นเส้นประ
- ขอบขวาและซ้ายเป็นของแข็ง
หากborder-styleคุณสมบัติมีค่าหนึ่งค่า:
- สไตล์เส้นขอบ: จุด;
- ขอบทั้งสี่มีจุดประ
ตัวอย่าง
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
คุณสมบัติborder-styleถูกใช้ในตัวอย่างข้างต้น อย่างไรก็ตาม มันยังใช้งานได้กับ
border-width
และborder-color.