คุณสมบัติชายแดน CSS
ซีเอสเอ border คุณสมบัติช่วยให้คุณสามารถระบุรูปแบบ, ความกว้างและสีของเส้นขอบองค์ประกอบของ
องค์ประกอบนี้มีเส้นขอบร่องที่เป็น 15px กว้างและสีเขียว
ลักษณะเส้นขอบ
border-style คุณสมบัติระบุชนิดของชายแดนที่จะแสดง
ค่าต่อไปนี้จะได้รับอนุญาต:
-
dotted- กำหนดชายแดนประ -
dashed- กำหนดชายแดนประ -
solid- กำหนดเส้นขอบที่เป็นของแข็ง -
double- กำหนดขอบคู่ -
groove- กำหนดพรมแดน 3D ร่อง ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี -
ridge- กำหนดเส้นขอบยับ 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี -
inset- กำหนดชายแดนภาพประกอบ 3 มิติ ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี -
outset- กำหนดชายแดนเริ่มแรก 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี -
none- ไม่มีการระบุชายแดน -
hidden- กำหนดเส้นขอบที่ซ่อนอยู่
border-style คุณสมบัติสามารถมี 1-4 ค่า (สำหรับเส้นขอบด้านบนขอบขวาขอบด้านล่างและชายแดนด้านซ้าย)
ตัวอย่าง
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}ผล:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
ลองตัวเอง»  | หมายเหตุ: ไม่มีคุณสมบัติ CSS ชายแดนอื่น ๆ ที่อธิบายด้านล่างนี้จะมีผลกระทบใด ๆ เว้นแต่ border-style การตั้งค่าคุณสมบัติ! |
|---|
ความกว้างชายแดน
border-width คุณสมบัติระบุความกว้างของเส้นขอบทั้งสี่
ความกว้างสามารถกำหนดให้เป็นขนาดที่เฉพาะเจาะจง (ใน px, pt, cm, em , ฯลฯ ) หรือโดยใช้หนึ่งในสามของค่าที่กำหนดไว้ล่วงหน้า: บางปานกลางหรือหนา
border-width คุณสมบัติสามารถมี 1-4 ค่า (สำหรับเส้นขอบด้านบนขอบขวาขอบด้านล่างและชายแดนด้านซ้าย)
ตัวอย่าง
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
ลองตัวเอง» สีของเส้นขอบ
border-color ทรัพย์สินที่ใช้ในการตั้งค่าสีของเส้นขอบทั้งสี่
สีที่สามารถตั้งค่าได้โดย:
- name - ระบุชื่อสีเช่นเดียวกับ "red"
- Hex - ระบุค่า hex เช่น "#ff0000"
- RGB - ระบุค่า RGB เช่น "rgb(255,0,0)"
- transparent
border-color คุณสมบัติสามารถมี 1-4 ค่า (สำหรับเส้นขอบด้านบนขอบขวาขอบด้านล่างและชายแดนด้านซ้าย)
ถ้า border-color ไม่ได้ตั้งจะสืบทอดสีขององค์ประกอบ
ตัวอย่าง
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} ลองตัวเอง» ชายแดน - บุคคลด้าน
จากตัวอย่างข้างต้นที่คุณได้เห็นว่ามันเป็นไปได้ที่จะระบุชายแดนแตกต่างกันสำหรับแต่ละด้าน
ใน CSS, นอกจากนี้ยังมีคุณสมบัติสำหรับการระบุแต่ละชายแดน (บนขวาล่างและจากซ้าย):
ตัวอย่าง
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} ลองตัวเอง» ตัวอย่างข้างต้นจะช่วยให้ผลเช่นเดียวกับนี้:
ดังนั้นนี่คือวิธีการทำงาน:
หาก border-style แห่งนี้มีสี่ค่า:
- border-style : ด่างดวงคู่ที่มั่นคงประ;
- เส้นขอบด้านบนเป็นจุดที่
- เส้นขอบด้านขวาเป็นของแข็ง
- ขอบด้านล่างเป็นสองเท่า
- ขอบซ้ายเป็นประ
หาก border-style แห่งนี้มีสามค่า:
- border-style : จุดแข็งคู่
- เส้นขอบด้านบนเป็นจุดที่
- เส้นขอบซ้ายและขวาเป็นของแข็ง
- ขอบด้านล่างเป็นสองเท่า
หาก border-style แห่งนี้มีสองค่า:
- border-style : จุดแข็ง
- เส้นขอบบนและด้านล่างเป็นจุดที่
- เส้นขอบซ้ายและขวาเป็นของแข็ง
หาก border-style ทรัพย์สินมีค่าที่หนึ่ง:
- border-style : ด่างดวง;
- ทั้งสี่ชายแดนเป็นจุดที่
border-style คุณสมบัติถูกนำมาใช้ในตัวอย่างข้างต้น แต่ก็ยังทำงานร่วมกับ border-width และ border-color
ชายแดน - อสังหาริมทรัพย์ชวเลข
ในขณะที่คุณสามารถดูจากตัวอย่างข้างต้นที่มีคุณสมบัติหลายอย่างที่จะต้องพิจารณาเมื่อต้องรับมือกับพรมแดน
เพื่อตัดรหัสก็ยังเป็นไปได้ที่จะระบุทุกคุณสมบัติชายแดนของแต่ละบุคคลในสถานที่ให้บริการ
border คุณสมบัติเป็นที่พักสำหรับคุณสมบัติของชวเลขชายแดนของแต่ละบุคคลต่อไปนี้:
-
border-width -
border-style(จำเป็น) -
border-color
ตัวอย่างเพิ่มเติม
ทุกคุณสมบัติที่เส้นขอบด้านบนในการประกาศ
ตัวอย่างนี้แสดงให้เห็นถึงคุณสมบัติที่จดชวเลขสำหรับการตั้งค่าทั้งหมดของคุณสมบัติของเส้นขอบด้านบนในการประกาศ
การตั้งค่ารูปแบบของชายแดนด้านล่าง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่ารูปแบบของชายแดนด้านล่าง
ตั้งค่าความกว้างของเส้นขอบด้านซ้าย
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะกำหนดความกว้างของเส้นขอบด้านซ้าย
ตั้งค่าสีของเส้นขอบทั้งสี่
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าสีของเส้นขอบทั้งสี่ มันสามารถมี 1-4 สี
การตั้งค่าสีของเส้นขอบด้านขวา
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าสีของเส้นขอบด้านขวา
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»
คุณสมบัติทั้งหมด CSS ชายแดน
| คุณสมบัติ | ลักษณะ |
|---|---|
| border | ทุกชุดคุณสมบัติชายแดนในการประกาศ |
| border-bottom | ทุกชุดคุณสมบัติที่ขอบด้านล่างในการประกาศ |
| border-bottom-color | ตั้งค่าสีของเส้นขอบด้านล่าง |
| border-bottom-style | ชุดรูปแบบของชายแดนด้านล่าง |
| border-bottom-width | กำหนดความกว้างของเส้นขอบด้านล่าง |
| border-color | ตั้งค่าสีของเส้นขอบทั้งสี่ |
| border-left | ทุกชุดคุณสมบัติขอบซ้ายหนึ่งในการประกาศ |
| border-left-color | ตั้งค่าสีของเส้นขอบด้านซ้าย |
| border-left-style | ชุดรูปแบบของเส้นขอบด้านซ้าย |
| border-left-width | กำหนดความกว้างของเส้นขอบด้านซ้าย |
| border-right | ทุกชุดคุณสมบัติชายแดนที่เหมาะสมในการประกาศ |
| border-right-color | ตั้งค่าสีของเส้นขอบด้านขวา |
| border-right-style | ชุดรูปแบบของเส้นขอบด้านขวา |
| border-right-width | กำหนดความกว้างของเส้นขอบด้านขวา |
| border-style | ชุดรูปแบบของเส้นขอบทั้งสี่ |
| border-top | ทุกชุดคุณสมบัติที่เส้นขอบด้านบนในการประกาศ |
| border-top-color | ตั้งค่าสีของเส้นขอบด้านบน |
| border-top-style | ชุดรูปแบบของชายแดนด้านบน |
| border-top-width | กำหนดความกว้างของเส้นขอบด้านบน |
| border-width | กำหนดความกว้างของเส้นขอบทั้งสี่ |