14/08/2018, 12:23
Rounded Corner trong CSS
Rounded Corner trong CSS được sử dụng để thêm góc màu tới phần thân tài liệu hoặc phần văn bản bởi sử dụng thuộc tính border-radius. Cú pháp đơn giản của Rounded Corner như sau: #rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; awidth: 200px; height: ...
Rounded Corner trong CSS được sử dụng để thêm góc màu tới phần thân tài liệu hoặc phần văn bản bởi sử dụng thuộc tính border-radius. Cú pháp đơn giản của Rounded Corner như sau:
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
awidth: 200px;
height: 150px;
}
Bảng dưới liệt kê một số giá trị mà Rounded Corner có thể nhận:
| Giá trị | Miêu tả |
|---|---|
| border-radius | Sử dụng phần tử này để thiết lập 4 thuộc tính border radius |
| border-top-left-radius | Sử dụng phần tử này để thiết lập góc trái trên cùng của border |
| border-top-right-radius | Sử dụng phần tử này để thiết lập góc phải trên cùng của border |
| border-bottom-right-radius | Sử dụng phần tử này để thiết lập góc phải dưới cùng của border |
| border-bottom-left-radius | Sử dụng phần tử này để thiết lập góc trái dưới cùng của border |
Ví 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;
awidth: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
awidth: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
awidth: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners1">Vi du Rounded Corner trong CSS!</p>
<p id="rcorners2">Vi du Rounded Corner trong CSS!</p>
<p id="rcorners3">Vi du Rounded Corner trong CSS!</p>
</body>
</html>
Kết quả là:
Thiết lập thuộc tính cho mỗi góc trong CSS
Chúng ta có thể thiết lập thuộc tính cho mỗi góc như trong ví dụ sau:
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
awidth: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
awidth: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
awidth: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
<body>
Kết quả là:
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại code24h.com:
