Chào các bạn, với các bài css cơ bản trước đó chúng ta cũng làm được một số chuyện cho giao diện web mình. Để màu mè hơn một tí hôm nay mình sẽ giới thiệu đến các bạn cách tạo góc bo tròn cho đối tượng HTML bằng CSS.
Trong lúc thiết kế với các đối tượng như: button, viền cạnh, khung, form, text box… đôi khi bạn muốn cho nó tròn tí tạo cảm giác sướng sướng cho người dùng thay vì cứ ngồi ngắm mấy cái vuông vuông trên trình duyệt.
Trong lúc thiết kế với các đối tượng như: button, viền cạnh, khung, form, text box… đôi khi bạn muốn cho nó tròn tí tạo cảm giác sướng sướng cho người dùng thay vì cứ ngồi ngắm mấy cái vuông vuông trên trình duyệt.
Để làm được chuyện này CSS cung cấp cho bạn một số thuộc tính giúp bạn định dạng bo tròn góc bao gồm bo trong trái, phải, toàn phần. Chúng ta khai báo như sau:
1
2
| -moz-border-radius: 10px;-webkit-border-radius: 10px; |
Chỉ số ở phía sau chỉ độ bo tròn của góc nhiều hay ít, với cách định dạng trên bạn sẽ được 4 góc bo tròn như hình sau:
Bo góc toàn phần trong CSS
1. Bo tròn góc trên trái
1
2
| -moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px; |
2. Bo góc tròn dưới trái
1
2
| -moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px; |
3. Bo góc tròn trên phải
1
2
| -moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px; |
4. Bo tròn góc dưới phải
1
2
| -moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px; |
Bo góc trong CSS
Kết luận: Lưu ý với các bạn các thuộc tính bo góc trong CSS này chỉ làm việc được trên các trình duyệt: google chrome, firefox, opera … chỉ trừ IE ra thui! hi.. chúc thành công!
0 nhận xét: