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