CSS รูปแบบของเส้นทางตั้งแบบบล็อค

คำอธิบายและวิธีใช้

border-block-style ตั้งค่าสไตล์ของเข็มขัดขององค์ประกอบในทิศทางบล็อค

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

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

border-block-style: dashed dotted;

• สไตล์ของเข็มขัดที่จุดเริ่มต้นของบล็อคเป็นสีโค้ง
• สไตล์ของเข็มขัดที่จุดสิ้นสุดของบล็อคเป็นสีจุด

ถ้า border-block-style มีค่าเดียวของคุณสมบัติ

border-block-style: dashed;

• สไตล์ของเข็มขัดที่จุดเริ่มต้นและจุดสิ้นสุดของบล็อคตัวเดียวกันเป็นสีเส้นโค้ง

CSS border-block-style 属性 กับ 属性 CSS border-bottom-style、border-left-style、border-right-style และ border-top-style เหมือนกันมาก แต่ border-block-style อุปกรณ์นี้ขึ้นอยู่กับทิศทางบล็อค。

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

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าขอบทางแบบบล็อค:

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

ลองเทียบด้วยตัวเอง

ตัวอย่าง 2: ผสมกับอุปกรณ์ writing-mode

ตำแหน่งของขอบทางแบบบล็อคที่เริ่มและจบได้รับการบวกเบี้ยนโดย writing-mode ผลกระทบของอุปกรณ์:

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

ลองเทียบด้วยตัวเอง

การเขียน CSS

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

ค่าของอุปกรณ์

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

การสนับสนุนโปรแกรมน่าดูแล

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

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

ตัวอย่าง:CSS ขอบเขต

อ้างอิง：CSS ความบริเวณของเขตของเส้นทาง

อ้างอิง：CSS ความบริเวณของเส้นทางตั้งแบบบล็อค

อ้างอิง：CSS รูปแบบของเส้นทางตั้งแบบบล็อค ด้านขวา

อ้างอิง：CSS รูปแบบของเส้นทางตั้งแบบบล็อค ด้านซ้าย

อ้างอิง：CSS รูปแบบของเส้นทางด้านล่าง

อ้างอิง：CSS ระบุ border-left-style

อ้างอิง：CSS ระบุ border-right-style

อ้างอิง：CSS ระบุ border-top-style

อ้างอิง：CSS writing-mode รายการ