CSS ลูกบอก-radius นิยาย

การรับรู้และการใช้งาน

คุณสมบัติ border-radius คือคุณสมบัติที่ย่อ, ใช้เพื่อตั้งค่าสี่คุณสมบัติ border-*-radius

คำแนะนำ:คุณสมบัตินี้อนุญาตให้คุณเพิ่มขอบโม้งแบบเส้นโค้งให้กับองค์ประกอบ

ดูเพิ่มเติมที่:

สอน CSS3:CSS3 ขอบ

ตัวอย่าง

เพิ่มเขตบริเวณมุมโม้งแบบเส้นโค้งให้กับองค์ประกอบ div:

div
{
border:2px solid;
border-radius:25px;
}

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

มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

ระบบสัญลักษณ์ CSS

border-radius: 1-4 length|% / 1-4 length|%;

หมายเหตุ:จัดตั้งค่าสี่เหล่านี้ของทุกๆ radii ตามลำดับนี้. ถ้าละเลย bottom-left จะเท่ากับ top-right. ถ้าละเลย bottom-right จะเท่ากับ top-left. ถ้าละเลย top-right จะเท่ากับ top-left.

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

ค่า คำอธิบาย การทดสอบ
length กำหนดรูปร่างของโม้ง การทดสอบ
% กำหนดรูปร่างของโม้งด้วยเปอร์เซ็นต์ การทดสอบ

ตัวอย่าง 1

border-radius:2em;

เท่ากับ:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

ตัวอย่าง 2

border-radius: 2em 1em 4em / 0.5em 3em;

เท่ากับ:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

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

ค่าเริ่มต้น: 0
มีการสืบทอด: no
รุ่น: CSS3
JavaScript ระบบสัญลักษณ์: object.style.borderRadius="5px"

การสนับสนุนโปรแกรมนำทาง

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

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5