CSS ระบุ border-start-end-radius

定義和用法

border-start-end-radius 屬性用於定義元素塊方向起始處（block-start）和行內方向末尾（inline-end）之間的圓角半徑。

注意：相關的 CSS 屬性 writing-mode、text-orientation และ direction 定義了塊方向和行內方向。這就是為什麼這些屬性也會影響 border-start-end-radius 屬性的結果。對於英文頁面，行內方向從左到右，塊方向向下。

如果 border-start-end-radius 屬性有两个值，則圓角將是一個橢圓：

border-start-end-radius: 50px 100px;

如果 border-start-end-radius 屬性有一個值，則圓角將是一個圓形：

border-start-end-radius: 50px;

CSS border-start-end-radius 属性與 border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius และ border-top-right-radius คล้ายกันมาก border-start-end-radius คุณสมบัตินี้ขึ้นอยู่กับทิศทางบล็อคและทิศทางแนวใน

ตัวอย่าง

ตัวอย่าง 1

เพิ่มโค้งที่จุดเริ่มต้นของทิศทางบล็อคและจุดสิ้นสุดของทิศทางแนวในสำหรับองค์ประกอบบางตัว:

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}

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

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

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

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}

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

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

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

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}

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

CSS สyntax

border-start-end-radius: 0|length|initial|inherit;

ค่าคุณสมบัติ

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

การสนับสนุนโปรแกรมน่าที่ใช้

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

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

ตัวอย่าง:CSS มุมเรียบ

อ้างอิง：CSS มุมตัดด้านล่างซ้าย

อ้างอิง：CSS มุมตัดด้านล่างขวา

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

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

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

อ้างอิง：CSS text-orientation รายการ

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