Góc
tròn với CSS3
Các góc tròn với CSS3
Với thuộc tính border-radius trong CSS3, bạn có thể làm các "góc tròn"
cho bất kỳ phần tử nào.
Các trình duyệt hỗ trợ
Những con số trong bảng cho thấy các phiên bản trình
duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.
Các số theo sau là - webkit- hoặc - moz- cho thấy các
phiên bản đầu tiên làm việc với thuộc tính này kèm theo một tiền tố.
Thuộc tính border-radius của CSS3
Với CSS3, bạn có thể làm "góc tròn" cho bất
kỳ phần tử nào, bằng cách sử dụng thuộc tính border-radius.
Dưới đây là ba ví dụ:
1.
Góc tròn
cho một phần tử với màu nền
2.
Góc tròn
cho một phần tử cùng với đường viền
3.
Góc tròn
cho một phần tử cùng với hình nền
Dưới đây là mã CSS:
#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 tính border-radius là thuộc tính rút gọn dành cho các thuộc tính border-top-left-radius, border-top-right-radius, border-bottom-right-radius và border-bottom-left-radius.
Thuộc tính border-radius trong CSS3 - Chỉ định cho mỗi góc
Nếu bạn cho thuộc tính border-radius chỉ một giá trị, giá trị (bán kính) này sẽ được áp dụng
cho tất cả 4 góc.
Tuy nhiên, bạn có thể chỉ định mỗi góc giá trị riêng
biệt nếu bạn muốn. Dưới đây là các quy tắc:
4 giá
trị: giá trị đầu tiên áp dụng
cho góc trên-trái (top-left), giá trị thứ hai cho góc trên-phải (top-right), giá trị thứ ba cho góc dưới-phải
(bottom-right), và giá trị thứ tư cho góc dưới-trái (bottom-left).
3 giá
trị: giá trị đầu tiên áp dụng
cho góc trên-trái, giá trị thứ hai cho góc trên-phải và dưới-trái, và thứ ba giá trị cho góc dưới-phải.
2 giá
trị: giá trị đầu tiên áp dụng
cho góc trên-trái và góc dưới-phải, và giá trị thứ hai áp dụng vào góc trên-phải và bên dưới-trái.
1 giá
trị: tất cả bốn góc được làm
tròn cùng một bán kính.
Dưới đây là ba ví dụ:
1. 4 giá trị -border-radius: 15px 50px 30px 5px:
2. 3 giá trị - border-radius: 15px 50px 30px
3. 2giá trị - border-radius: 15px 50px:
Dưới đây là mã CSS:
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Bạn
cũng có thể tạo ra các góc elip:
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Tự
làm bài tập!
Các thuộc tính về góc tròn của CSS3
Thuộc tính
|
Mô tả
|
Thuộc tính rút gọn để thiết
lập cho tất cả các bốn thuộc tính border-*-*-radius
|
|
Thiết lập hình dạng của của
góc trên bên trái (top-left)
|
|
Thiết lập hình dạng cho góc
trên bên phải (top-right)
|
|
Thiết lập hình dạng cho góc
trên dưới bên phải (bottom-right)
|
|
Thiết lập hình dạng cho góc
trên bên dưới trái (bottom-left)
|
Codelean.vn
Nguồn w3shools.org
Đăng nhận xét