Thiết kế giao diện người dùng (UI) hiện đại ngày nay thường chú trọng đến sự tinh tế và hài hòa. Một trong những chi tiết nhỏ nhưng lại tạo nên hiệu ứng thẩm mỹ đáng kể là việc bo tròn các góc của nút bấm và hình ảnh. Bài viết này sẽ hướng dẫn bạn cách sử dụng CSS để tạo hiệu ứng này một cách đơn giản và hiệu quả, cung cấp các phương pháp khác nhau cùng những ví dụ cụ thể để bạn dễ dàng áp dụng vào dự án của mình. Chúng ta sẽ khám phá các thuộc tính CSS liên quan và cách sử dụng chúng để tạo ra các giao diện đẹp mắt và chuyên nghiệp.
Làm thế nào để bo tròn góc của nút và hình ảnh bằng CSS?
➡️ Xem thêm: Tip: Cách đổi chữ “Add to cart” thành “Mua ngay” trong Flatsome.
Sử dụng thuộc tính border-radius
Thuộc tính border-radius là công cụ chính để bo tròn các góc của phần tử HTML. Thuộc tính này cho phép bạn điều chỉnh độ cong của từng góc riêng biệt hoặc tất cả các góc cùng một lúc. Đơn vị đo thường sử dụng là pixel (px) hoặc phần trăm (%).
– Không có tham số: Nếu bạn không chỉ định giá trị nào, border-radius sẽ không có tác dụng.
– Một giá trị: Nếu chỉ định một giá trị, tất cả các góc sẽ được bo tròn với bán kính bằng giá trị đó. Ví dụ: border-radius: 10px; sẽ bo tròn tất cả các góc với bán kính 10 pixel.
1 2 3 4 5 6 7 8 | .button { border-radius: 10px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } |
– Hai giá trị: Nếu chỉ định hai giá trị, giá trị đầu tiên sẽ áp dụng cho bán kính góc trên bên trái và góc dưới bên phải, giá trị thứ hai sẽ áp dụng cho bán kính góc trên bên phải và góc dưới bên trái. Ví dụ: border-radius: 10px 20px;
1 2 3 4 5 6 7 8 | .button { border-radius: 10px 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } |
– Bốn giá trị: Nếu chỉ định bốn giá trị, các giá trị sẽ lần lượt áp dụng cho các góc trên bên trái, trên bên phải, dưới bên phải và dưới bên trái. Ví dụ: border-radius: 10px 20px 30px 40px;
1 2 3 4 5 6 7 8 | .button { border-radius: 10px 20px 30px 40px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } |
– Sử dụng phần trăm: Bạn cũng có thể sử dụng phần trăm làm đơn vị, trong trường hợp này, bán kính sẽ được tính toán dựa trên chiều rộng và chiều cao của phần tử. Ví dụ: border-radius: 50%; sẽ tạo ra một hình tròn hoàn hảo nếu chiều rộng và chiều cao của phần tử bằng nhau.
Bo tròn góc cho hình ảnh
Áp dụng border-radius cho hình ảnh cũng tương tự như với các nút bấm. Bạn chỉ cần thêm thuộc tính này vào selector của thẻ
1 2 3 4 5 | img { border-radius: 15px; width: 200px; height: auto; } |
➡️ Xem thêm: Cách thêm Breadcrumb cho Bài viết WordPress mà không cần dùng Plugin
Tạo hiệu ứng hình tròn hoàn hảo
Để tạo một hình tròn hoàn hảo từ một hình ảnh vuông hoặc hình chữ nhật, bạn cần đặt giá trị của border-radius bằng 50% chiều rộng hoặc chiều cao của phần tử. Điều này chỉ khả thi khi chiều rộng và chiều cao của phần tử bằng nhau.
1 2 3 4 5 6 7 8 9 10 11 12 | .circle-image { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; /* Ẩn phần hình ảnh thừa ra ngoài vòng tròn */ } .circle-image img { width: 100%; height: 100%; object-fit: cover; /* Điều chỉnh hình ảnh để phủ kín vòng tròn */ } |
Sử dụng nhiều thuộc tính border-radius khác nhau
Bạn có thể kết hợp sử dụng các giá trị khác nhau cho border-radius để tạo ra nhiều hiệu ứng bo tròn khác nhau, tùy thuộc vào thiết kế của bạn. Ví dụ, bạn có thể làm cho các góc trên cùng bo tròn nhiều hơn so với các góc dưới cùng.
Tránh xung đột với các thuộc tính khác
Khi sử dụng border-radius, cần lưu ý đến các thuộc tính CSS khác có thể ảnh hưởng đến hình dạng của phần tử, ví dụ như padding, margin, border. Đôi khi cần điều chỉnh các thuộc tính này để đạt được hiệu quả mong muốn.
Hiệu ứng bo tròn góc trên các trình duyệt khác nhau
Thuộc tính border-radius được hỗ trợ rộng rãi trên hầu hết các trình duyệt hiện đại. Tuy nhiên, trong một số trường hợp hiếm hoi trên các trình duyệt cũ hơn, bạn có thể cần sử dụng các tiền tố nhà cung cấp như -webkit-border-radius, -moz-border-radius, v.v… để đảm bảo tính tương thích. Tuy nhiên, việc này hiện nay ít cần thiết hơn rất nhiều.
Ứng dụng thực tế
Việc bo tròn góc không chỉ làm cho giao diện trở nên đẹp mắt hơn mà còn góp phần tạo nên trải nghiệm người dùng tốt hơn. Nút bấm với góc bo tròn thường trông thân thiện và dễ nhấn hơn so với các nút có góc cạnh sắc nhọn. Hình ảnh với góc bo tròn tạo cảm giác mềm mại và hiện đại hơn.
Kết hợp với các thuộc tính CSS khác
border-radius có thể được kết hợp với các thuộc tính CSS khác như box-shadow, transition để tạo ra những hiệu ứng chuyển động mượt mà và đẹp mắt. Ví dụ, bạn có thể kết hợp border-radius với box-shadow để tạo ra hiệu ứng bóng nổi bật cho nút bấm.
Tối ưu hóa hiệu suất
Việc sử dụng border-radius không ảnh hưởng đáng kể đến hiệu suất của website, vì vậy bạn không cần phải lo lắng về vấn đề này. Tuy nhiên, nên sử dụng thuộc tính này một cách hợp lý và tránh lạm dụng để giữ cho code CSS của bạn gọn gàng và dễ bảo trì.
