Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
  • Trang chủ
  • Học CSS
  • [Tự học CSS] – Tự học về thuộc tính bo tròn đường viền trong CSS
166 lượt xem

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

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 Giuseart.com. 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 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 :

 

Mẹo: Các border-radius thực sự là một tài sản viết tắt cho border-top-left-radiusborder-top-right-radiusborder-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 làm tròn như nhau:

enter image description here

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

Bạn cũng có thể tạo các góc elip:

Ví dụ

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

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

Thông báo: GiuseArt đang xây dựng một website chia sẻ tài nguyên thiết kế đồ họa hoàn toàn miễn phí cho người Công Giáo, dự kiến ra mắt vào đầu năm 2019. Nếu bạn muốn, hãy tham gia cùng chúng tôi nhé! Tham gia ngay

Bài viết mới cập nhật:

Bình luận Facebook

Trả lời

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 *

Chat Facebook