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

7494 lượt xem
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

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

5/5 - (3 bình chọn)
Chia sẻ bài viết:

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ừ Facebookzalo 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!

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

Để 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 *