Các góc tròn CSS
Các góc tròn CSS
Với thuộc tính border-radius CSS, bạn có thể cung cấp cho bất kỳ phần tử nào "các góc tròn".
Thuộc tính bán kính đường viền CSS
Thuộc tính border-radius CSS xác định bán kính các góc của phần tử.
Mẹo: Thuộc tính này cho phép bạn thêm các góc tròn vào các phần tử!
Dưới đây là ba ví dụ:
1. Các góc được làm tròn cho một phần tử có màu nền được chỉ định:
Các góc tròn!
2. Các góc bo tròn cho phần tử có viền:
Các góc tròn!
3. Các góc bo tròn cho phần tử có hình nền:
Các góc tròn!
Đây là mã:
Ví dụ
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} Hãy tự mình thử » Mẹo: Thuộc tính border-radius thực ra là một thuộc tính viết tắt của các thuộc tính border-top-left-radius , border-top-right-radius , border-bottom-right-radius và border-bottom-left-radius .
Bán kính đường viền CSS - Chỉ định từng góc
Thuộc tính border-radius có thể có từ một đến bốn giá trị. Đây là các quy tắc:
Bốn giá trị - bán kính đường viền: 15px 50px 30px 5px; (giá trị đầu tiên áp dụng cho góc trên bên trái, giá trị thứ hai áp dụng cho góc trên bên phải, giá trị thứ ba áp dụng cho góc dưới bên phải và giá trị thứ tư áp dụng cho góc dưới bên trái):
Ba giá trị - bán kính đường viền: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên bên trái, giá trị thứ hai áp dụng cho góc trên bên phải và góc dưới bên trái và giá trị thứ ba áp dụng cho góc dưới cùng bên phải):
Hai giá trị - bán kính đường viền: 15px 50px; (giá trị đầu tiên áp dụng cho góc trên bên trái và góc dưới bên phải và giá trị thứ hai áp dụng cho góc trên bên phải và góc dưới bên trái):
Một giá trị - bán kính đường viền: 15px; (giá trị áp dụng cho cả bốn góc được làm tròn bằng nhau:
Đây là mã:
Ví dụ
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Hãy tự mình thử »Bạn cũng có thể tạo các góc hình elip:
Ví dụ
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Hãy tự mình thử » Thuộc tính góc tròn CSS
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |
