CSS3: Bo góc với border-radius
Giải phóng thời gian, khai phóng năng lực
CSS3 cho phép bạn có thể bo tròn các góc mà không cần phải lập trình hay sử dụng kỹ thuật Photoshop bằng cách sử dụng thuộc tính border-radius.
Có bốn góc sau đây bạn cần biết: trên-trái, trên-phải, dưới-trái, dưới-phải.
Trình duyệt hỗ trợ
Internet Explorer 9+, FireFox, Chrome, Safari, Opera.
Sau đây là các cú pháp áp dụng của thuộc tính border-radius:
Cú pháp 1:
border-radius: [Bán_kính];
Cú pháp trên sẽ bo tròn góc giống nhau cho cả bốn góc của hình.
Ví dụ: border-radius: 10px; /*Cả 4 góc đều được bo tròn với bán kính 10px*/
Cú pháp 2:
border-radius: [trên-trái và dưới-phải] [trên-phải và dưới-trái]; /*2 giá trị*/
Cú pháp trên sẽ bo tròn góc cho hai cặp góc so le của hình.
Ví dụ: border-radius: 5px 10px;
Cú pháp 3:
border-radius: [trên-trái] [trên-phải và dưới-trái] [dưới-phải]; /*3 giá trị*/
Cú pháp trên sẽ bo tròn góc cho góc trên-trái, góc trên-phải và góc dưới-trái cùng nhận bán kính giống nhau, và góc dưới-phải của hình.
Ví dụ: border-radius: 5px 10px 15px;
Cú pháp 4:
border-radius: [trên-trái] [trên-phải] [dưới-trái] [dưới-phải]; /*4 giá trị*/
Cú pháp trên sẽ bo tròn góc cho từng góc của hình.
Ví dụ: border-radius: 5px 10px 15px 20px;
Sau đây là một ví dụ cụ thể của thuộc tính border-radius.
Ví dụ: Phần code dưới đây sẽ bo tròn góc cho phần tử <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1{
padding:10px 40px;
background:green;
width:300px;
color:white;
height:80px;
margin:10px;
}
#d1:first-child{
border-radius:10px;
}
#d1:nth-child(2){
border-radius:10px 20px;
}
#d1:nth-child(3){
border-radius:10px 20px 30px;
}
#d1:last-child{
border-radius:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id="d1">Cả 4 góc đều có bán kính như nhau = 10px.</div>
<div id="d1">Các góc trên-trái và dưới-phải có bán kính 10px.<br>Các góc trên-phải và dưới-trái có bán kính 20px.</div>
<div id="d1">Góc trên-trái có bán kính 10px.<br>Góc trên-phải và dưới-trái có bán kính 20px.<br>Góc dưới-phải có bán kính 30px.</div>
<div id="d1">Góc trên-trái có bán kính 10px.<br>Góc trên-phải có bán kính 20px.<br>Góc dưới-phải có bán kính 30px.<br>Góc dưới-trái có bán kính 40px.</div>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực