The CSS Podcast - 016: Borders
ในโมดูลรูปแบบกล่อง เราใช้การเปรียบเทียบเฟรมเพื่ออธิบายแต่ละส่วนของรูปแบบกล่อง
กล่องเส้นขอบคือกรอบของกล่อง และพร็อพเพอร์ตี้ border
มีตัวเลือกมากมายในการสร้างกรอบในรูปแบบต่างๆ ที่คุณนึกออก
พร็อพเพอร์ตี้ของเส้นขอบ
พร็อพเพอร์ตี้ border
แต่ละรายการมีวิธีกำหนดสไตล์ให้กับส่วนต่างๆ ของเส้นขอบ
รูปแบบ
หากต้องการให้ขอบปรากฏขึ้น คุณจะต้องกําหนด border-style
โดยตัวเลือกมีดังนี้
เมื่อใช้สไตล์ ridge
, inset
, outset
และ groove
เบราว์เซอร์จะปรับสีเส้นขอบของสีที่แสดงเป็นสีที่ 2 ให้เข้มขึ้นเพื่อให้เกิดความคมชัดและมิติ
ลักษณะการทํางานนี้อาจแตกต่างกันไปในแต่ละเบราว์เซอร์ โดยเฉพาะอย่างยิ่งสําหรับสีเข้ม เช่น black
ใน Chrome สไตล์เส้นขอบเหล่านี้จะปรากฏเป็นเส้นขอบทึบ และใน Firefox เส้นขอบจะสว่างขึ้นเพื่อให้สีที่ 2 เข้มขึ้น
ลักษณะการทํางานของเบราว์เซอร์อาจแตกต่างกันไปสําหรับขอบสไตล์อื่นๆ ด้วย คุณจึงควรทดสอบเว็บไซต์ในเบราว์เซอร์ต่างๆ
ตัวอย่างที่พบบ่อยของความแตกต่างนี้คือวิธีที่เบราว์เซอร์แต่ละตัวแสดงผลสไตล์ dotted
และ dashed
หากต้องการตั้งค่าลักษณะเส้นขอบในแต่ละด้านของกล่อง ให้ใช้ border-top-style
, border-right-style
, border-left-style
และ border-bottom-style
ชวเลข
เช่นเดียวกับ margin
และ padding
คุณสามารถใช้พร็อพเพอร์ตี้ทางลัด border
เพื่อกำหนดส่วนต่างๆ ของเส้นขอบทั้งหมดในการประกาศครั้งเดียว
.my-element {
border: 1px solid red;
}
ลําดับของค่าในตัวย่อ border
คือ border-width
,
border-style
และตามด้วย border-color
สี
คุณตั้งค่าสีบนกล่องทุกด้านหรือแต่ละด้านได้ด้วย border-color
โดยค่าเริ่มต้น ข้อความจะใช้สีข้อความปัจจุบันของกล่อง: currentColor
ซึ่งหมายความว่าหากคุณประกาศเฉพาะพร็อพเพอร์ตี้เส้นขอบ เช่น ความกว้าง สีจะเป็นค่าที่คำนวณแล้ว เว้นแต่คุณจะตั้งค่าไว้อย่างชัดเจน
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}
.my-element {
color: blue;
border: solid yellow;
}
หากต้องการตั้งค่าสีเส้นขอบในแต่ละด้านของกล่อง ให้ใช้ border-top-color
, border-right-color
, border-left-color
และ border-bottom-color
ความกว้าง
ความกว้างของเส้นขอบคือความหนาของเส้น และควบคุมโดย border-width
ความกว้างของเส้นขอบเริ่มต้นคือ medium
แต่ตัวเลือกนี้จะไม่ปรากฏจนกว่าคุณจะกำหนดสไตล์
คุณใช้ความกว้างที่มีชื่ออื่นๆ ได้ เช่น thin
และ thick
พร็อพเพอร์ตี้ border-width
ยังยอมรับหน่วยความยาว เช่น px
, em
, rem
หรือ %
ด้วย
หากต้องการกำหนดความกว้างของเส้นขอบในแต่ละด้านของกล่อง ให้ใช้ border-top-width
, border-right-width
, border-left-width
และ border-bottom-width
พร็อพเพอร์ตี้เชิงตรรกะ
ในข้อบังคับคุณสมบัติเชิงตรรกะ คุณได้ดูวิธีอ้างอิงลำดับการทำงานแบบบล็อกและลำดับการทำงานแบบอินไลน์แทนที่จะใช้ด้านบน ขวา ล่าง หรือซ้ายอย่างชัดเจน
คุณทำสิ่งต่อไปนี้กับเส้นขอบได้ด้วย
.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}
ในตัวอย่างนี้ .my-element
มีการกำหนดทุกด้านให้มี2px
เส้นขอบเป็นจุดซึ่งเป็นสีข้อความปัจจุบัน
จากนั้นระบบจะกําหนดเส้นขอบ inline-end
เป็น 2px
แบบทึบและสีแดง
ซึ่งหมายความว่าในภาษาที่อ่านจากซ้ายไปขวา เช่น ภาษาอังกฤษ เส้นขอบสีแดงจะอยู่ทางด้านขวาของช่อง
สำหรับภาษาที่อ่านจากขวาไปซ้าย เช่น ภาษาอาหรับ เส้นขอบสีแดงจะอยู่ทางด้านซ้ายของกล่อง
เบราว์เซอร์แต่ละรุ่นรองรับพร็อพเพอร์ตี้เชิงตรรกะในเส้นขอบแตกต่างกันไป ดังนั้นโปรดตรวจสอบการรองรับก่อนใช้งาน
รัศมีของเส้นขอบ
หากต้องการให้กล่องมีมุมมน ให้ใช้พร็อพเพอร์ตี้ border-radius
.my-element {
border-radius: 1em;
}
ตัวย่อนี้จะเพิ่มเส้นขอบที่สอดคล้องกันในแต่ละมุมของกล่อง
คุณสามารถกำหนดรัศมีของเส้นขอบสำหรับแต่ละด้านได้เช่นเดียวกับพร็อพเพอร์ตี้เส้นขอบอื่นๆ โดยใช้ border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
และ border-bottom-left-radius
นอกจากนี้ คุณยังระบุรัศมีของมุมแต่ละมุมในรูปแบบคำสั่งสั้นๆ ได้ด้วย โดยเรียงตามลําดับดังนี้ ซ้ายบน ขวาบน ขวาล่าง และซ้ายล่าง
.my-element {
border-radius: 1em 2em 3em 4em;
}
การกําหนดค่าเดียวสําหรับมุมหมายความว่าคุณกําลังใช้ตัวย่ออีกรูปแบบหนึ่ง เนื่องจากรัศมีของเส้นขอบจะแบ่งออกเป็น 2 ส่วน ได้แก่ ด้านแนวตั้งและแนวนอน
ซึ่งหมายความว่าเมื่อคุณตั้งค่า border-top-left-radius: 1em
คือการกําหนดรัศมีของด้านบนซ้าย-ด้านบน และรัศมีของด้านบนซ้าย-ซ้าย
คุณกําหนดทั้ง 2 พร็อพเพอร์ตี้ต่อมุมได้ดังนี้
.my-element {
border-top-left-radius: 1em 2em;
}
ซึ่งจะเพิ่มค่า border-top-left-top
เป็น 1em
และค่า border-top-left-left
เป็น 2em
ซึ่งจะแปลงรัศมีเส้นขอบด้านซ้ายบนให้เป็นรัศมีรูปไข่แทนรัศมีวงกลมเริ่มต้น
คุณสามารถกําหนดค่าเหล่านี้ในเครื่องหมาย border-radius
ได้โดยการใช้ /
เพื่อกําหนดค่ารูปไข่ต่อจากค่ามาตรฐาน
ซึ่งจะช่วยให้คุณมีความคิดสร้างสรรค์และสร้างรูปร่างที่ซับซ้อนได้
.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
รูปภาพที่มีเส้นขอบ
คุณไม่จำเป็นต้องใช้เส้นขอบตามจังหวะใน CSS เท่านั้น
นอกจากนี้ คุณยังใช้รูปภาพประเภทใดก็ได้โดยใช้ border-image
พร็อพเพอร์ตี้ตัวย่อนี้ช่วยให้คุณตั้งค่ารูปภาพต้นฉบับ วิธีตัดรูปภาพนั้น ระยะห่างของขอบจากขอบ และวิธีให้ขอบซ้ำ
.my-element {
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}
คุณสมบัติ border-image-width
จะเหมือนกับ border-width
ตรงที่เป็นวิธีกำหนดความกว้างของรูปภาพเส้นขอบ
พร็อพเพอร์ตี้ border-image-outset
ให้คุณตั้งค่าระยะห่างระหว่างรูปภาพเส้นขอบกับกล่องที่รูปภาพวางอยู่รอบๆ ได้
border-image-source
border-image-source
(แหล่งที่มาของรูปภาพเส้นขอบ) อาจเป็น url
สำหรับรูปภาพที่ถูกต้อง ซึ่งรวมถึงไล่ระดับสี CSS
.my-element {
border-image-source: url('path/to/image.png');
}
.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}
border-image-slice
พร็อพเพอร์ตี้ border-image-slice
เป็นพร็อพเพอร์ตี้ที่มีประโยชน์ซึ่งช่วยให้คุณแบ่งรูปภาพออกเป็น 9 ส่วน โดยประกอบด้วยเส้นแบ่ง 4 เส้น
ซึ่งทํางานเหมือนกับตัวย่อ margin
ที่คุณกําหนดค่าออฟเซตด้านบน ขวา ล่าง และซ้าย
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
เมื่อกําหนดค่าออฟเซตแล้ว ตอนนี้คุณจะมีรูปภาพ 9 ส่วน ได้แก่ มุม 4 ส่วน ขอบ 4 ส่วน และส่วนกลาง
ระบบจะใช้มุมกับมุมขององค์ประกอบที่มีรูปภาพเส้นขอบ
ระบบจะใช้ขอบกับขอบขององค์ประกอบนั้น
พร็อพเพอร์ตี้ border-image-repeat
จะกำหนดวิธีที่ขอบเหล่านั้นเติมเต็มพื้นที่ และพร็อพเพอร์ตี้ border-image-width
จะควบคุมขนาดของส่วน
สุดท้าย คีย์เวิร์ด fill
จะกำหนดว่าจะใช้ส่วนตรงกลางที่เหลือจากการแบ่งเป็นพื้นหลังขององค์ประกอบหรือไม่
border-image-repeat
border-image-repeat
คือวิธีที่คุณบอก CSS ว่าต้องการให้รูปภาพเส้นขอบซ้ำอย่างไร
ซึ่งจะทำงานเหมือนกับ background-repeat
- ค่าเริ่มต้นคือ
stretch
ซึ่งจะยืดรูปภาพต้นทางให้เต็มพื้นที่ว่างหากเป็นไปได้ - ค่า
repeat
จะวางภาพขอบของรูปภาพต้นฉบับซ้อนกันมากที่สุดเท่าที่จะเป็นไปได้ และอาจตัดขอบของภูมิภาคเพื่อดำเนินการนี้ - ค่า
round
เหมือนกับค่า repeat แต่แทนที่จะตัดขอบรูปภาพให้พอดีกับจำนวนมากที่สุด ระบบจะยืดรูปภาพและแสดงซ้ำเพื่อให้เกิดความต่อเนื่อง - ค่า
space
เหมือนกับ repeat อีกครั้ง แต่ค่านี้จะเพิ่มพื้นที่ว่างระหว่างขอบแต่ละส่วนเพื่อสร้างรูปแบบที่ไร้รอยต่อ
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับเส้นขอบ
เส้นขอบเริ่มต้นเป็นสีใด
black
historicColor
white
currentColor
.my-element { border: solid hotpink; }
เส้นขอบมีขอบเริ่มต้นเท่าใด
medium
1px
solid
border-inline: 1px solid
would...