พอดแคสต์ CSS - 016: Borders
ในโมดูลโมเดลกล่อง เราพิจารณาการเปรียบเทียบเฟรมที่อธิบายแต่ละส่วนของโมเดลกล่อง
กรอบรูปคือกรอบของกล่อง และพร็อพเพอร์ตี้ border
มีตัวเลือกมากมายให้คุณสร้างเฟรมนั้นในเกือบทุกรูปแบบที่คุณนึกได้
คุณสมบัติของเส้นขอบ
พร็อพเพอร์ตี้ border
แต่ละรายการแสดงวิธีการจัดรูปแบบส่วนต่างๆ ของเส้นขอบ
สไตล์
คุณต้องกำหนด border-style
เพื่อให้ระบบแสดงเส้นขอบ
โดยมีตัวเลือก 2-3 แบบให้เลือกดังนี้
เมื่อใช้รูปแบบ ridge
, inset
, outset
และ groove
เบราว์เซอร์จะทำให้สีเส้นขอบเข้มขึ้นสำหรับสีที่สองที่แสดงเพื่อให้คอนทราสต์และความลึก
ลักษณะการทำงานนี้อาจแตกต่างกันไปในแต่ละเบราว์เซอร์ โดยเฉพาะสีเข้ม เช่น black
ใน Chrome รูปแบบเส้นขอบเหล่านี้จะเป็นสีทึบและใน Firefox
จะสว่างขึ้นเพื่อให้ได้สีที่สองที่เข้มขึ้น
ลักษณะการทำงานของเบราว์เซอร์อาจแตกต่างกันไปตามลักษณะเส้นขอบอื่นๆ ด้วย
ดังนั้นจึงจำเป็นต้องทดสอบเว็บไซต์ของคุณในเบราว์เซอร์ต่างๆ
ตัวอย่างทั่วไปของความแตกต่างนี้คือวิธีที่เบราว์เซอร์แต่ละรายการแสดงผลสไตล์ 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
เท่ากับว่าคุณจะตั้งค่ารัศมีด้านบนซ้าย-บนและรัศมีด้านบนซ้าย-ซ้าย
คุณสามารถกำหนดพร็อพเพอร์ตี้ทั้งสองรายการสำหรับมุมแต่ละมุมได้ดังนี้
.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
เหมือนกับค่าการทำซ้ำ แต่แทนที่จะตัดพื้นที่ขอบรูปภาพให้พอดีกับขอบภาพให้ได้มากที่สุดเท่าที่จะเป็นไปได้ ระบบจะยืดรูปภาพและทำซ้ำเพื่อให้รูปภาพวนซ้ำโดยแนบเนียน - ค่า
space
เป็นค่าเดียวกับการทำซ้ำ แต่ค่านี้จะเพิ่มช่องว่างระหว่างขอบแต่ละด้านเพื่อสร้างรูปแบบที่ราบรื่น
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับพรมแดน
สีเส้นขอบเริ่มต้นคือสีใด
black
white
currentColor
text-color
ที่คำนวณแล้ว และเป็นสีเส้นขอบเริ่มต้นhistoricColor
.my-element { border: solid hotpink; }
ความกว้างเริ่มต้นของเส้นขอบคือเท่าใด
1px
medium
solid
border-style
ไม่ใช่ค่า border-width
border-inline: 1px solid
จะ...
border-block
จะเป็นด้านบนและด้านล่าง