[Tự học CSS] – Tự học về thuộc tính bo tròn đường viền trong CSS

Hướng dẫn

[Tự học CSS] – Tự học về thuộc tính bo tròn đường viền trong CSS

Mẹo nhỏ: Để tìm kiếm chính xác các mẫu web đẹp của Ninh Bình Web, hãy search trên Google với cú pháp: "Từ khóa" + "ninhbinhweb". (Ví dụ: mẫu web bất động sản ninhbinhweb). Tìm kiếm ngay

Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Ninh Bình Web. Như các bạn đã biết thì trong CSS có thuộc tính border dùng để tạo đường viền cho nội dung của CSS, nhưng chưa dừng lại ở đó. CSS còn có thuộc tính bo tròn lại nội dung của đường viền để làm cho bắt mắt người dùng hơn. Vậy muốn bo tròn đường viền thì phải làm thế nào thì trong bài viết này mình sẽ hướng dẫn các bạn.

Thuộc Tính Bán Kính Đường Viền CSS

Thuộc tính CSS border-radius định nghĩa bán kính của các góc của phần tử.

Mẹo: Thuộc tính này cho phép bạn thêm đường viền bo tròn vào các phần tử !

Dưới đây là ba ví dụ:

  1. Góc tròn cho một phần tử có màu nền được chỉ định:enter image description here
  2. Góc tròn cho một phần tử có đường viền:enter image description here
  3. Góc tròn cho phần tử có hình nền:enter image description here

Ví dụ về đoạn code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#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: Các border-radius thực sự là một tài sản viết tắt cho border-top-left-radius, border-top-right-radius, border-bottom-right-radius và border-bottom-left-radius.

Bán Kính Đường Viền CSS – Chỉ Định Từng Góc

Các border-radius có thể có từ một đến bốn giá trị. Đây là các quy tắc:

Bốn giá trị – bán kính đường viền: 15px 50px 30px 5px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải, giá trị thứ ba áp dụng cho góc dưới cùng bên phải và giá trị thứ tư áp dụng cho góc dưới cùng bên trái):

enter image description here

Ba giá trị – bán kính đường viền: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái và giá trị thứ ba áp dụng cho góc dưới cùng bên phải):

enter image description here

Hai giá trị – bán kính đường viền: 15px 50px; (giá trị đầu tiên áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải và giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái):

enter image description here

Một giá trị – bán kính đường viền: 15px; (giá trị áp dụng cho tất cả bốn góc, được bo tròn như nhau:

enter image description here

Ví dụ về đoạn mã code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#rcorners1 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners2 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners3 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners4 {
    border-radius: 15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Bạn cũng có thể tạo các góc elip( bo tròn góc):

Ví dụ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#rcorners1 {
    border-radius: 50px / 15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners2 {
    border-radius: 15px / 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners3 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Cũng không khó lắm nhỉ, nó cũng chỉ có vậy thôi. Qua bài viết này mình cần các bạn nhớ một điều là thuộc tính border-radius dùng để tạo đường viền bo tròn cho nội dung làm cho trang web của bạn trở nên đẹp hơn. Cảm ơn các bạn đã xem bài viết, hãy cùng chờ đón những bài viết tiếp theo từ mình nhé…

Rate this post

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebook và zalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Xem thêm:

Bài viết cùng chủ đề:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *