CSS3 - Góc tròn
CSS3 Các góc được làm tròn được sử dụng để thêm góc có màu đặc biệt vào nội dung hoặc văn bản bằng cách sử dụng thuộc tính border-radius. Cú pháp đơn giản của các góc được làm tròn như sau:
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}Bảng sau đây cho thấy các giá trị có thể có cho các góc được làm tròn như sau:
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | border-radius Sử dụng phần tử này để đặt thuộc tính bán kính bốn người ở trọ |
| 2 | border-top-left-radius Sử dụng phần tử này để thiết lập nội trú ở góc trên cùng bên trái |
| 3 | border-top-right-radius Sử dụng phần tử này để thiết lập nội trú ở góc trên cùng bên phải |
| 4 | border-bottom-right-radius Sử dụng phần tử này để thiết lập nội trú ở góc dưới cùng bên phải |
| 5 | border-bottom-left-radius Sử dụng phần tử này để thiết lập nội trú ở góc dưới cùng bên trái |
Thí dụ
Thuộc tính này có thể có ba giá trị. Ví dụ sau sử dụng cả hai giá trị:
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Mỗi căn góc
Chúng ta có thể chỉ định thuộc tính từng góc như minh họa bên dưới ví dụ:
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>Nó sẽ tạo ra kết quả sau: