Borders

ในโมดูลรูปแบบกล่อง เราใช้การเปรียบเทียบเฟรมเพื่ออธิบายแต่ละส่วนของรูปแบบกล่อง

กรอบรูป 3 กรอบวางเรียงกัน
เฟรมกลางมีส่วนของโมเดลกล่องวางอยู่ด้านบน

กล่องเส้นขอบคือกรอบของกล่อง และพร็อพเพอร์ตี้ border มีตัวเลือกมากมายในการสร้างกรอบในรูปแบบต่างๆ ที่คุณนึกออก

พร็อพเพอร์ตี้ของเส้นขอบ

พร็อพเพอร์ตี้ border แต่ละรายการมีวิธีกำหนดสไตล์ให้กับส่วนต่างๆ ของเส้นขอบ

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

รูปแบบ

หากต้องการให้ขอบปรากฏขึ้น คุณจะต้องกําหนด border-style โดยตัวเลือกมีดังนี้

เมื่อใช้สไตล์ ridge, inset, outset และ groove เบราว์เซอร์จะปรับสีเส้นขอบของสีที่แสดงเป็นสีที่ 2 ให้เข้มขึ้นเพื่อให้เกิดความคมชัดและมิติ ลักษณะการทํางานนี้อาจแตกต่างกันไปในแต่ละเบราว์เซอร์ โดยเฉพาะอย่างยิ่งสําหรับสีเข้ม เช่น black ใน Chrome สไตล์เส้นขอบเหล่านี้จะปรากฏเป็นเส้นขอบทึบ และใน Firefox เส้นขอบจะสว่างขึ้นเพื่อให้สีที่ 2 เข้มขึ้น

ลักษณะการทํางานของเบราว์เซอร์อาจแตกต่างกันไปสําหรับขอบสไตล์อื่นๆ ด้วย คุณจึงควรทดสอบเว็บไซต์ในเบราว์เซอร์ต่างๆ ตัวอย่างที่พบบ่อยของความแตกต่างนี้คือวิธีที่เบราว์เซอร์แต่ละตัวแสดงผลสไตล์ dotted และ dashed

การสาธิตเส้นขอบใน Chrome, Firefox และ Safari ซึ่งแสดงให้เห็นความแตกต่างเล็กน้อยในลักษณะที่เส้นขอบแสดง
ขอบที่แสดงใน Chrome, Firefox และ Safari

หากต้องการตั้งค่าลักษณะเส้นขอบในแต่ละด้านของกล่อง ให้ใช้ 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;
}

รูปภาพที่ใช้ในการสาธิตซึ่งมีการแสดงส่วน 4 ส่วนด้วยเส้นสีน้ำเงิน

เมื่อกําหนดค่าออฟเซตแล้ว ตอนนี้คุณจะมีรูปภาพ 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 อีกครั้ง แต่ค่านี้จะเพิ่มพื้นที่ว่างระหว่างขอบแต่ละส่วนเพื่อสร้างรูปแบบที่ไร้รอยต่อ

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับเส้นขอบ

เส้นขอบเริ่มต้นเป็นสีใด

white
historicColor
currentColor
black
.my-element {
  border: solid hotpink;
}

เส้นขอบมีขอบเริ่มต้นเท่าใด

1px
solid
medium

border-inline: 1px solid would...

ใส่เส้นขอบด้านใน
ใส่เส้นขอบในบรรทัดแรก
ใส่เส้นขอบด้านซ้ายและขวา (ในเลย์เอาต์แบบละติน)
ใส่เส้นขอบด้านบนและด้านล่าง (ในเลย์เอาต์แบบละติน)