CSS รูปแบบขอบด้านฝั่ง

การกำหนดและการใช้งาน

border-inline-style คุณสมบัติตั้งค่ารูปแบบของเส้นขอบขององค์ประกอบในทิศทางของการเขียนบรรยาย

border-inline-style ค่าของคุณสมบัติสามารถตั้งค่าด้วยวิธีต่างๆ

ถ้า border-inline-style คุณสมบัติมีค่าสอง

border-inline-style: solid dotted;
  • ของเส้นขอบที่ตั้งต้นของการเขียนบรรยายเป็นสายตรง (solid)
  • ของเส้นขอบที่สิ้นสุดของการเขียนบรรยายเป็นจุดสาย (dotted)

ถ้า border-inline-style คุณสมบัติมีค่าหนึ่ง

border-inline-style: dotted;
  • ของเส้นขอบที่ตั้งต้นและสิ้นสุดของบรรยายทั้งสองเป็นจุดสาย (dotted)

CSS border-inline-style คุณสมบัตินี้มีค่า border-bottom-style、border-left-style、border-right-style และ border-top-style คุณสมบัติที่คล้ายกันมาก แต่ border-inline-style คุณสมบัตินี้ขึ้นอยู่กับทิศทางของการเขียนบรรยาย

แจ้งเตือน：CSS ที่เกี่ยวข้อง writing-mode、text-orientation และ direction กำหนดทิศทางของการเขียนบรรยาย ซึ่งมีผลต่อตำแหน่งเริ่มต้นและสิ้นสุดของบรรยาย และ border-inline-style ผลลัพธ์ของคุณสมบัติ。สำหรับหน้าเว็บอังกฤษ ทิศทางของการเขียนบรรยายว่าจากซ้ายไปขวา และทิศทางของบล็อคว่าลงมา

ตัวอย่าง

ตัวอย่างที่ 1

กำหนดรูปแบบของขอบเขตที่มีทิศทางในแถวนอินไลน์:

#example1 {
  border-inline-style: solid;
}
#example2 {
  border-inline-style: dashed dotted;
}

ลองด้วยตัวเอง

ตัวอย่างที่ 2: ผสมทั้งคุณสมบัติ writing-mode

ตำแหน่งของขอบเขตที่เริ่มและจบของทิศทางในแถวนอินไลน์ต่อตัวเองขึ้นอยู่กับ writing-mode ผลกระทบของคุณสมบัติ:

div {
  writing-mode: vertical-rl;
  border-inline-style: dotted;
}

ลองด้วยตัวเอง

ตัวอย่างที่ 3: ผสมทั้งคุณสมบัติ direction

ตำแหน่งของขอบเขตที่เริ่มและจบของทิศทางในแถวนอินไลน์ต่อตัวเองขึ้นอยู่กับ direction ผลกระทบของคุณสมบัติ:

div {
  direction: rtl;
  border-inline-style: solid dotted;
}

ลองด้วยตัวเอง

ระบบการเขียน CSS

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

ค่าของคุณสมบัติ

ค่า คำอธิบาย
none ค่าเริ่มต้น。กำหนดไม่มีขอบเขต。
hidden เหมือน none แต่มีความแตกต่างในการแก้ปัญหาของขอบเขตที่ชนกันในองค์ประกอบแบบแผนภาพ。
dotted กำหนดขอบทรงสามมิติที่เป็นเส้นจุด。
dashed กำหนดขอบทรงสามมิติที่เป็นเส้นลายขาว。
solid กำหนดขอบทรงสามมิติที่เป็นเส้นตรง。
double กำหนดขอบทรงสามมิติที่เป็นสองสาย。
groove

กำหนดขอบทรงสามมิติที่ทับน้ำหนักใน。

ผลลัพธ์ของมันขึ้นอยู่กับค่า border-color。
ridge

กำหนดขอบทรงสามมิติที่ทับน้ำหนักนอก。

ผลลัพธ์ของมันขึ้นอยู่กับค่า border-color。
inset

กำหนดขอบทรงสามมิติที่หน้าตัดใน。

ผลลัพธ์ของมันขึ้นอยู่กับค่า border-color。
outset

กำหนดขอบทรงสามมิติที่หน้าตัดนอก。

ผลลัพธ์ของมันขึ้นอยู่กับค่า border-color。
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู: initial.
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน。ดู: inherit.

รายละเอียดเทคนิค

ค่าเริ่มต้น: none
การสืบทอด: ไม่
การสร้างอนุการ์: ไม่สนับสนุน。ดู:คุณสมบัติที่เกี่ยวข้องกับอนุการ์.
รุ่น: CSS3
ระบบการเขียน JavaScript: object.style.borderInlineStyle="dotted"

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

ตัวเลขในตารางนี้แสดงค่ารุ่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

หน้าที่เกี่ยวข้อง

คู่มือ:CSS ขอบเขต

อ้างอิง:CSS รายละเอียดเขตเข้มข้น

อ้างอิง:CSS รายละเอียดเขตเข้มข้นด้านใน

อ้างอิง:CSS รูปแบบขอบด้านฝั่ง

อ้างอิง:CSS รายละเอียดรูปแบบเขตเข้มข้นด้านทิศตะวันออกตอนต่ำ

อ้างอิง:CSS รูปแบบขอบด้านฝั่งซ้าย

อ้างอิง:CSS รูปแบบขอบด้านฝั่งขวา

อ้างอิง:CSS รูปแบบขอบด้านบน

อ้างอิง:CSS ทิศทาง

อ้างอิง:CSS text-orientation คุณสมบัติ

อ้างอิง:CSS writing-mode คุณสมบัติ