Để thuận tiện tiếp thu bài hướng dẫn này thì thứ nhất bạn cần xem qua :
- Thuộc tính border trong CSS
- Thuộc tính background-color trong CSS
- Thuộc tính border-top-left-radius trong CSS
- Thuộc tính border-top-right-radius trong CSS
- Thuộc tính border-bottom-left-radius trong CSS
- Thuộc tính border-bottom-right-radius trong CSS
1) Thuộc tính border-radius trong CSS
– 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 thành phần này có độ cong là 10 px .
- Góc top-left của phần tử này có độ cong là 0px.
- Góc top-right của phần tử này có độ cong là 50px.
- Góc bottom-left của phần tử này có độ cong là 50px.
- Góc bottom-right của phần tử này có độ cong là 100px.
– 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.
2) Cách sử dụng thuộc tính border-radius trong CSS
– Để sử dụng thuộc tính border-radius, ta dùng cú pháp như sau:
border-radius: pixel|percent|width/height|initial|inherit;– 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:
| pixel | – Xác định độ cong những góc dựa theo một giá trị px đơn cử . | Xem ví dụ |
| percent | – Xác định độ cong những góc dựa theo tỷ suất % kích cỡ của thành phần . | Xem ví dụ |
| width/height | – Độ cong của những góc được xác lập dựa vào một chiều rộng và một chiều cao chỉ định . | Xem ví dụ |
| initial | – Sử dụng giá trị mặc định của nó . ( mặc định thì những góc của thành phần không có độ cong ) |
Xem ví dụ |
| inherit | – Kế thừa giá trị thuộc tính border-radius từ thành phần cha của nó | Xem ví dụ |
3) Thiết lập độ cong của từng góc
– 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 !?
- Góc top-left của phần tử này có độ cong là 10px.
- Góc top-right của phần tử này có độ cong là 40px.
- Góc bottom-left của phần tử này có độ cong là 50%.
- Góc bottom-right của phần tử này có độ cong là 100px.
– Để xác lập độ cong ở từng góc của thành phần thì ta có một số ít cú pháp như sau :
3.1) Cú pháp 1
border-radius: value1 value2 value3 value4;- Góc top-left của phần tử sẽ có độ cong là value1
- Góc top-right của phần tử sẽ có độ cong là value2
- Góc bottom-right của phần tử sẽ có độ cong là value3
- Góc bottom-left của phần tử sẽ có độ cong là value4
Ví dụ :
Xem ví dụ
3.2) Cú pháp 2
border-radius: value1 value2 value3;- Góc top-left của phần tử sẽ có độ cong là value1
- Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2
- Góc bottom-right của phần tử sẽ có độ cong là value3
Ví dụ :
Xem ví dụ
3.3) Cú pháp 3
border-radius: value1 value2;- Góc top-left & bottom-right của phần tử sẽ có độ cong là value1
- Góc top-right & bottom-left của phần tử sẽ có độ cong là value2
Ví dụ :
Xem ví dụ
4) Thiết lập độ cong của từng góc (khi giá trị là width/height)
– Nếu ta thiết lập độ cong từng góc của thành phần theo cách xác lập độ cong dựa vào chiều rộng và 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:
border-radius: bộ giá trị thứ nhất/bộ giá trị thứ hai;– Trong đó:
- Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.
- Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.
Ví dụ 1 :
– Nếu ta thiết lập độ cong những góc của thành phần với cú pháp như sau :
border-radius: 250px 50px 125px 25px / 100px 25px 75px 25px;– Khi đó:
- Góc top-left sẽ có độ cong là 250px/100px
- Góc top-right sẽ có độ cong là 50px/25px
- Góc bottom-right sẽ có độ cong là 125px/75px
- Góc bottom-left sẽ có độ cong là 25px/25px
(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)
Xem ví dụVí dụ 2 :
– Nếu ta thiết lập độ cong những góc của thành phần với cú pháp như sau :
border-radius: 250px 50px 125px / 100px 25px;– Khi đó:
- Góc top-left sẽ có độ cong là 250px/100px
- Góc top-right sẽ có độ cong là 50px/25px
- Góc bottom-right sẽ có độ cong là 125px/100px
- Góc bottom-left sẽ có độ cong là 50px/25px
(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)
Xem ví dụVí dụ 3 :
– Nếu ta thiết lập độ cong những góc của thành phần với cú pháp như sau :
border-radius: 250px 15px / 100px 75px;– Khi đó:
- Góc top-left sẽ có độ cong là 250px/100px
- Góc top-right sẽ có độ cong là 15px/75px
- Góc bottom-right sẽ có độ cong là 250px/100px
- Góc bottom-left sẽ có độ cong là 15px/75px
(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)
Xem ví dụ
