CSS3 คุณสมบัติ border-radius
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
คุณสมบัติ | |||||
---|---|---|---|---|---|
ขอบภาพ | 4.0 -webkit- | 9.0 | 4.0 -moz- | 5.0 -webkit- | 10.5 -o- |
แอตทริบิวต์คำจำกัดความและคำแนะนำ
คุณสมบัติ border-radius เป็นสามารถระบุได้ถึงสี่ชายแดน - * - คุณสมบัติรัศมีของคุณสมบัติคอมโพสิต
หมายเหตุ: คุณสมบัตินี้ช่วยให้คุณสามารถเพิ่มองค์ประกอบเส้นขอบโค้งมน!
เริ่มต้น: | 0 |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ object.style.borderRadius = "5px" |
ไวยากรณ์
border-radius:1-4 length|%/1-4 length|%;
หมายเหตุ: คำสั่งของสี่ค่าของแต่ละรัศมีคือด้านซ้ายบนขวาบนมุมขวาด้านล่างมุมซ้ายล่างถ้าคุณไม่ใช้มุมล่างซ้ายมุมบนขวาเหมือนกัน ถ้าคุณไม่ใช้มุมล่างขวามุมบนซ้ายเหมือนกัน ถ้าคุณไม่ใช้มุมขวาบนมุมซ้ายบนจะเหมือนกัน
值 | 描述 |
---|---|
length | 定义弯道的形状。 |
% | 使用%定义角落的形状。 |
ตัวอย่างที่ 1
border-radius: 2em;
เทียบเท่ากับ:
ขอบบนด้านซ้ายรัศมี: 2em;
ขอบด้านบนขวารัศมี: 2em;
ขอบล่างขวารัศมี: 2em;
ขอบล่างซ้ายรัศมี: 2em;
เทียบเท่ากับ:
ขอบบนด้านซ้ายรัศมี: 2em;
ขอบด้านบนขวารัศมี: 2em;
ขอบล่างขวารัศมี: 2em;
ขอบล่างซ้ายรัศมี: 2em;
ตัวอย่างที่ 2
border-radius: 2em 1em 4em / 0.5em 3em;
เทียบเท่ากับ:
ขอบบนด้านซ้ายรัศมี: 2em 0.5em;
ขอบด้านบนขวารัศมี: 1em 3em;
ขอบล่างขวารัศมี: 4em 0.5em;
ขอบล่างซ้ายรัศมี: 1em 3em;
เทียบเท่ากับ:
ขอบบนด้านซ้ายรัศมี: 2em 0.5em;
ขอบด้านบนขวารัศมี: 1em 3em;
ขอบล่างขวารัศมี: 4em 0.5em;
ขอบล่างซ้ายรัศมี: 1em 3em;
บทความที่เกี่ยวข้อง
CSS3 กวดวิชา: ชายแดน CSS3