Góc làm tròn CSS
Góc làm tròn CSS
Với thuộc tính CSS border-radius
, bạn có thể cung cấp cho bất kỳ phần tử nào "các góc được làm tròn".
Thuộc tính bán kính đường viền CSS
Thuộc tính CSS
border-radius
xác định bán kính của 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 được làm tròn!
2. Các góc được làm tròn cho phần tử có đường viền:
Các góc được làm tròn!
3. Các góc được làm tròn cho một phần tử có hình nền:
Các góc được làm tròn!
Đây là mã:
Thí 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;
}
Mẹo: Thuộc border-radius
tính thực sự là một thuộc tính viết tắt cho các
thuộc tính border-top-left-radius
,
và .border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Bán kính đường viền CSS - Chỉ định từng góc
Thuộc border-radius
tính 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 cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải, giá trị thứ ba áp dụng cho góc dưới cùng bên phải và giá trị thứ tư áp dụng cho góc dưới bên trái):
Ba giá trị - border-radius: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải và dưới cùng 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ị - border-radius: 15px 50px; (giá trị đầu tiên áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải và giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái):
Một giá trị - border-radius: 15px; (giá trị áp dụng cho tất cả bốn góc, được làm tròn bằng nhau:
Đây là mã:
Thí 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;
}
Bạn cũng có thể tạo các góc hình elip:
Thí 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;
}
Thuộc tính CSS Rounded Corners
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 |