CSS นิยายเขตบอร์เดอร์ออนไลน์ด้านทางตะวันออก

定义和用法

border-inline-end 属性是以下属性的简写：

• border-inline-end-width（行内结束边框宽度）
• border-inline-end-style（行内结束边框样式）
• border-inline-end-color（行内结束边框颜色）

CSS 的 border-inline-end 属性与 border-bottom、border-left、border-right และ border-top 属性非常相似，但 border-inline-end 属性依赖于行内方向。

注意：相关的 CSS 属性 writing-mode、text-orientation และ direction กำหนดแนวในรอบนอก ซึ่งจะมีผลต่อตำแหน่งที่เริ่มและสิ้นสุดของแถว และ border-inline-end ผลของคุณสมบัตินี้ สำหรับหน้าเว็บที่ใช้ภาษาอังกฤษ แนวในรอบนอกคือจากซ้ายไปขวา แนวบล็อคคือจากบนไปล่าง。

ตัวอย่าง

ตัวอย่าง 1

กำหนดความกว้าง สี และรูปแบบของเขตตรงขอบที่ด้านสุดท้ายขององค์ประกอบที่อยู่ในแนวในรอบนอก:

div {
  border-inline-end: 10px solid pink;
}

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

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

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

div {
  writing-mode: vertical-rl;
  border-inline-end: 5px solid blue;
}

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

ตัวอย่าง 3: ร่วมกับคุณสมบัติ direction

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

div {
  direction: rtl;
  border-inline-end: 5px solid hotpink;
}

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

CSS ภาษา

border-inline-end: border-inline-end-width border-inline-end-style border-inline-end-color|initial|inherit;

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

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

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

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

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

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

คู่มือ:CSS ขอบ

อ้างอิง：CSS นิยายเขตเขต

อ้างอิง：CSS นิยายเขตบอร์เดอร์ออนไลน์

อ้างอิง：CSS นิยายเขตบอร์เดอร์สไตล์ออนไลน์ด้านทางตะวันออก

อ้างอิง：CSS นิยายเขตบอร์เดอร์คอลอร์ออนไลน์ด้านทางตะวันออก

อ้างอิง：CSS นิยายเขตบอร์เดอร์คอลอร์ด้านล่าง

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

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

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

อ้างอิง：CSS ความหนาแน่นdirection

อ้างอิง：CSS text-orientation

อ้างอิง：CSS writing-mode