CSS นิสิตระบบเขตติดขอบรัศมีด้านท้ายด้านขวา
- หน้าก่อน border-color
- หน้าต่อไป border-end-start-radius
การกำหนดและการใช้งาน
border-end-end-radius
คุณสมบัติใช้เพื่อกำหนดเส้นรอบที่อยู่ที่ท้ายของแนวบล็อค (block-end) และท้ายของแนวด้านใน (inline-end).
注意:คุณสมบัติที่เกี่ยวข้อง writing-mode
、text-orientation
和 direction
กำหนดแนวทางแบบบล็อคและแนวทางแบบด้านใน ดังนั้นคุณสมบัติเหล่านี้ก็จะส่งผลต่อ 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-radius
、border-bottom-right-radius
、border-top-left-radius
和 border-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 ภาษี
- หน้าก่อน border-color
- หน้าต่อไป border-end-start-radius