คุณสมบัติCSS border-bottom-left-radius
ตัวอย่าง
เพิ่มขอบโค้งมนที่มุมล่างซ้ายของสอง <div> องค์ประกอบ:
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-radius: 50px
20px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติborder-bottom-left-radius
กำหนดรัศมีของมุมล่างซ้าย
เคล็ดลับ:คุณสมบัตินี้ช่วยให้คุณเพิ่มเส้นขอบโค้งมนให้กับองค์ประกอบได้!
ค่าเริ่มต้น: | 0 |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.borderBottomLeftRadius="25px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit- หรือ -moz- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
border-bottom-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
ไวยากรณ์ CSS
border-bottom-left-radius: length|% [length|%]|initial|inherit;
หมายเหตุ:หากคุณตั้งค่าสองค่า ค่าแรกสำหรับเส้นขอบด้านล่าง และค่าที่สองสำหรับเส้นขอบด้านซ้าย หากละค่าที่สอง ค่านั้นจะถูกคัดลอกจากค่าแรก หากความยาวด้านใดด้านหนึ่งเป็นศูนย์ มุมจะเป็นสี่เหลี่ยมจัตุรัส ไม่ใช่มน
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เพิ่มขอบโค้งมนที่มุมล่างซ้ายเป็นเปอร์เซ็นต์:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS มุมโค้งมน
การอ้างอิง HTML DOM: borderBottomLeftRadius คุณสมบัติ