Bài đăng nổi bật

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 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

Post a Comment

أحدث أقدم