Borders

พอดแคสต์ CSS - 016: Borders

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

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

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

คุณสมบัติของเส้นขอบ

พร็อพเพอร์ตี้ border แต่ละรายการแสดงวิธีการจัดรูปแบบส่วนต่างๆ ของเส้นขอบ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

สไตล์

คุณต้องกำหนด border-style เพื่อให้ระบบแสดงเส้นขอบ โดยมีตัวเลือก 2-3 แบบให้เลือกดังนี้

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

ลักษณะการทำงานของเบราว์เซอร์อาจแตกต่างกันไปตามลักษณะเส้นขอบอื่นๆ ด้วย ดังนั้นจึงจำเป็นต้องทดสอบเว็บไซต์ของคุณในเบราว์เซอร์ต่างๆ ตัวอย่างทั่วไปของความแตกต่างนี้คือวิธีที่เบราว์เซอร์แต่ละรายการแสดงผลสไตล์ 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 เท่ากับว่าคุณจะตั้งค่ารัศมีด้านบนซ้าย-บนและรัศมีด้านบนซ้าย-ซ้าย

คุณสามารถกำหนดพร็อพเพอร์ตี้ทั้งสองรายการสำหรับมุมแต่ละมุมได้ดังนี้

.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 เหมือนกับค่าการทำซ้ำ แต่แทนที่จะตัดพื้นที่ขอบรูปภาพให้พอดีกับขอบภาพให้ได้มากที่สุดเท่าที่จะเป็นไปได้ ระบบจะยืดรูปภาพและทำซ้ำเพื่อให้รูปภาพวนซ้ำโดยแนบเนียน
  • ค่า space เป็นค่าเดียวกับการทำซ้ำ แต่ค่านี้จะเพิ่มช่องว่างระหว่างขอบแต่ละด้านเพื่อสร้างรูปแบบที่ราบรื่น

ตรวจสอบความเข้าใจของคุณ

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

สีเส้นขอบเริ่มต้นคือสีใด

black
ลองอีกครั้งนะ
white
ลองอีกครั้งนะ
currentColor
ค่า CSS พิเศษนี้จะแสดงค่า text-color ที่คำนวณแล้ว และเป็นสีเส้นขอบเริ่มต้น
historicColor
ทั้งหมดนี้สร้างขึ้น ลองอีกครั้งนะ
 
.my-element {
  border: solid hotpink;
}

ความกว้างเริ่มต้นของเส้นขอบคือเท่าใด

1px
ลองอีกครั้งนะ
medium
🎉
solid
นี่คือค่า border-style ไม่ใช่ค่า border-width

border-inline: 1px solid จะ...

ใส่เส้นขอบด้านซ้ายและขวา (ในเลย์เอาต์แบบละติน)
🎉
ใส่เส้นขอบด้านบนและด้านล่าง (ในเลย์เอาต์แบบละติน)
ในเลย์เอาต์ภาษาละติน เช่น ภาษาอังกฤษ border-block จะเป็นด้านบนและด้านล่าง
ใส่เส้นขอบไว้ด้านใน
ลองอีกครั้งนะ
ใส่เส้นขอบในบรรทัดแรก
ลองอีกครั้งนะ