CSS นิสิตระบบเขตติดขอบรัศมีด้านท้ายด้านขวา

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

border-end-end-radius คุณสมบัติใช้เพื่อกำหนดเส้นรอบที่อยู่ที่ท้ายของแนวบล็อค (block-end) และท้ายของแนวด้านใน (inline-end).

注意:คุณสมบัติที่เกี่ยวข้อง writing-modetext-orientationdirection กำหนดแนวทางแบบบล็อคและแนวทางแบบด้านใน ดังนั้นคุณสมบัติเหล่านี้ก็จะส่งผลต่อ border-end-end-radius ผลของคุณสมบัติ สำหรับหน้าเว็บที่ใช้ภาษาอังกฤษ แนวทางแบบด้านในคือจากซ้ายไปขวา แนวทางแบบบล็อคคือลงลงมา.

ถ้า border-end-end-radius คุณสมบัติมีค่าสอง หลังเล็กจะเป็นวงกลมทรงกลม:

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

ถ้า border-end-end-radius คุณสมบัติมีค่าหนึ่ง หลังเล็กมักจะเป็นวงกลม:

border-end-end-radius: 50px;

CSS border-end-end-radius 属性与 border-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radiusborder-top-right-radius 属性非常相似,但 border-end-end-radius 属性依赖于块方向和行内方向。

实例

例子 1

为某些元素的块方向末尾和行内方向末尾添加圆角:

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

亲自试一试

例子 2:结合 direction 属性

块方向和行内方向末尾的圆角位置受 direction 属性的影响:

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

亲自试一试

例子 3:结合 writing-mode 属性

块方向和行内方向末尾的圆角位置受 writing-mode 属性的影响:

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

亲自试一试

CSS 语法

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

属性值

描述
0 默认值。
length 定义块方向末尾和行内方向末尾的圆角形状。
% 以元素在对应轴上的长度的百分比定义此圆角形状。
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู: initial.
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน。ดู: inherit.

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

ค่าเริ่มต้น: 0
การสืบทอด: ไม่
การสร้างแอนิเมชัน: สนับสนุน。ดูข้อมูลเพิ่มเติม:คุณสมบัติที่เกี่ยวข้องกับแอนิเมชัน.
รุ่น: CSS3
การเขียนโปรแกรมเจาะจง: object.style.borderEndEndRadius="50px"

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

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

Chrome Edge Firefox Safari Opera
89.0 89.0 66.0 15.0 75.0

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

วิธีการ:CSS หรือปลายสูตร

อ้างอิง:CSS นิสิตระบบเขตติดขอบด้านล่างรัศมีด้านซ้ายล่าง

อ้างอิง:CSS นิสิตระบบเขตติดขอบด้านล่างรัศมีด้านขวาล่าง

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

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

อ้างอิง:CSS ความหลากหลายdirection

อ้างอิง:CSS text-orientation ภาษี

อ้างอิง:CSS writing-mode ภาษี