Hướng dẫn css border-radius
Show
Định nghĩa và sử dụngThuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ở css2 (Xem thêm về border trong css2). Cấu trúctag {
border: bề-dày kiểu mã-màu;
border-radius: giá trị;
-moz-border-radius: giá trị;
-webkit-border-radius: giá trị;
-ms-border-radius: giá trị;
-o-border-radius: giá trị;
}Trong đó:
HTML viết:
Hiển thị trình duyệt khi chưa có CSS:CSS viết:p {
border: 2px solid #cc0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}Hiển thị trình duyệt khi có CSS:
border-radius là gì?Đối với những góc bo tròn, nếu không sử dụng
Cấu trúctag {
border-radius: giá-trị;
}
Cách sử dụngHTML viết:
CSS viết - khi chưa sử dụng border-radius: div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}Hiển thị trình duyệt: Bây giờ ta sẽ sử dụng CSS viết: div {
border: 3px solid #ffcccc;
border-radius: 10px;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}Hiển thị trình duyệt: Nhìn kết quả trên, ta thấy 4 góc của CSS viết: Hiển thị trình duyệt: Chúng ta có thể điều khiển từng góc riêng biệt thay vì điều khiển cùng lúc 4 góc. HTML viết: CSS viết: Hiển thị trình duyệt: Tới đây chắc các bạn đã biết cách dùng - Thuộc tính border-radius dùng để thiết lập "độ cong" các góc của phần tử HTML. - Ví dụ: Các góc của phần tử này có độ cong là 10px. - Lưu ý: Chúng ta chỉ thấy được độ cong các góc của phần tử khi phần tử được thiết lập đường viền hoặc màu nền. - Để sử dụng thuộc tính border-radius, ta dùng cú pháp như sau: - Trong đó, ta thấy giá trị thuộc tính border-radius có thể được xác định bởi một trong năm loại: - Xác định độ cong các góc dựa theo một giá trị pixel cụ thể. - Xác định độ cong các góc dựa theo tỷ lệ % kích thước của phần tử. - Độ cong của các góc được xác định dựa vào một chiều rộng & một chiều cao chỉ định. - Sử dụng giá trị mặc định của nó. (mặc định thì các góc của phần tử không có độ cong) - Kế thừa giá trị thuộc tính border-radius từ phần tử cha của nó - Khi chúng ta sử dụng thuộc tính border-radius với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn góc của phần tử sẽ có chung một độ cong. - Tuy nhiên, nếu muốn mỗi góc của phần tử có một độ cong riêng biệt (giống ví dụ bên dưới), thì ta phải làm như thế nào !? - Để xác định độ cong ở từng góc của phần tử thì ta có một số cú pháp như sau: Xem ví dụ Xem ví dụ Xem ví dụ - Nếu ta thiết lập độ cong từng góc của phần tử theo cách xác định độ cong dựa vào chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên. - Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height: - Trong đó: - Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau: - Khi đó: (tương đương với thuộc tính border-top-left-radius được thiết lập giá trị 250px 100px) (tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 50px 25px) (tương
đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 75px) (tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 25px 25px) - Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau: - Khi đó: (tương đương với thuộc tính border-top-left-radius được thiết lập giá
trị 250px 100px) (tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 50px 25px) (tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 100px) (tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 50px 25px)
- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau: - Khi đó: (tương đương với thuộc tính border-top-left-radius được thiết lập giá trị 250px 100px) (tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 15px 75px) (tương đương với thuộc tính
border-bottom-right-radius được thiết lập giá trị 250px 100px) (tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 15px 75px) |
