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

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

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

注意：คุณสมบัติที่เกี่ยวข้อง writing-mode、text-orientation และ direction กำหนดแนวทิศทางแบบบล็อคและแนวทางแบบอินไลน์ ดังนั้นคุณสมบัติเหล่านี้ก็จะส่งผลกระทบต่อ border-start-start-radius ผลลัพธ์ของคุณสมบัตินี้ สำหรับหน้าเว็บที่ใช้ภาษาอังกฤษ แนวทางแบบอินไลน์เป็นทิศทางจากซ้ายไปขวา แนวทางแบบบล็อคเป็นทิศทางลงด้านล่าง。

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

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

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

border-start-start-radius: 50px;

CSS border-start-start-radius คุณสมบัติและ border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius และ border-top-right-radius คล้ายกัน border-start-start-radius คุณสมบัตินี้ขึ้นกับแนวบล็อคและแนวแถว

ตัวอย่าง

ตัวอย่างที่ 1

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

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

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

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

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

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

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

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

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

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

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

การเขียนบทความ CSS

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

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

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

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

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

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

ตัวเรียน:CSS มุมโค้ง

อ้างอิง:CSS รายละเอียด border-bottom-left-radius

อ้างอิง:CSS รายละเอียด border-bottom-right-radius

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

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

อ้างอิง:CSS รายการทิศทาง

อ้างอิง:CSS text-orientation คุณสมบัติ

อ้างอิง:CSS writing-mode คุณสมบัติ