Borders

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

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

ทดสอบความรู้เรื่องพรมแดน

.my-element {
  border: solid hotpink;
}