Bo tròn góc trong CSS

Chắc hẳn các bạn đều biết đến Apple, một công ty đình đám trong lĩnh vực CNTT với nhiểu sản phẩm chất lượng cao như Iphone, Ipad…Một trong những yếu tố giúp Apple đạt doanh thu cao và là đối thủ cạnh tranh đáng gờm với những gã “khổng lồ” như Google, Microsoft là sản phẩm được đầu tư, thiết kế thân thiện, màu sắc hài hòa với kiểu dáng trang nhã đã tạo thiện cảm ngay với người sử dụng. Trong số đó, không thể không kể đến thiết kế bo tròn góc trong hầu hết các sản phẩm của Apple, nó làm cho sản phẩm thêm sự mềm mại, tinh tế và có một sức hút đối với người dùng.

Trong thiết kế web, hiệu ứng bo tròn góc sẽ làm cho trang web chúng ta sống động hơn, hài hòa hơn. Trong bài viết hôm nay, tôi sẽ giới thiệu đến các bạn cách sử dụng hiệu ứng này.

1, Firefox, Safari, Opera & Chrome

Đây là những trình duyệt web hiện đại và thông minh, hỗ trợ đầy đủ các chuẩn web của tổ chức W3C . Để tạo hiệu ứng , bạn chỉ cần khai báo như sau :

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

Trong đoạn code trên , thuộc tính-moz-border-radius là của Firefox, -webkit-border-radius là Chrome/Safari và -khtml-border-radius dành cho trình duyệt Konquerer. Và cuối cùng trong tương lai thuộc tính border-radius sẽ là khai báo chung cho tất cả trình duyệt web khi muốn sử dụng hiệu ứng bo tròn góc.

Hình ảnh minh họa sau khi bo tròn góc

Reddit Recommended AI Hentai Generator

2, Internet Explorer (IE)

Sở dĩ tôi xếp IE ra riêng vì nó có một chuẩn riêng và mỗi phiên bản lại có sự thay đổi, không thống nhất , nhất quán giữa các phiên bản cũ và mới. Đối với lập trình viên hoặc thiết kế web thì có lẽ phải “đau đầu” với việc test trên các trình duyệt IE6,7 và 8. Hiện nay IE9 bắt đầu mang hơi hướng của các trình duyệt web hiện đại và đã cũng hỗ trợ CSS3. Nhưng các phiên bản IE trước kia thì lại không hỗ trợ cho hiệu ứng này.

Trước đây, mỗi khi làm Prototype cho khách hàng, nếu trong thiết kế có sử dụng bo tròn thì tôi thường cắt cạnh trên/dưới hoặc trái/phải và phần ở giữa tôi sẽ dùng thuộc tính background: url(/”) repeat-x; để lặp bao lấy nội dung. Hiện nay trên Internet có rất nhiều trang web hướng dẫn cách “hack” để các thuộc tính CSS chạy tốt trên IE.

Tôi tìm được một cách khác, đơn giản hơn. Đầu tiên bạn download file .htc tại Curved Corner . Sau đó bạn khai báo đoạn code sau khi muốn áp dụng cho các phần tử

.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}

Tôi đã test trên các phiên bản IE cũ hơn và thấy khá tốt. Tuy nhiên các bạn cũng cần lưu ý các điều sau:

• Các phần tử khi sử dụng thủ thuật này nên sử dụng position: relative
• Đối với IE6, có thể hiệu ứng chưa tốt, bạn hãy dùng zoom: 1
• Đôi khi phát sinh lỗi với hiệu ứng Hover

Ngoài ra tôi thấy có 2 bài hướng dẫn (tutorial) khá hay và chi tiết về cách sử dụng bo tròn. Bạn có thể tham khảo thêm tại

http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/

http://css-tricks.com/snippets/css/rounded-corners/

3, Tổng kết

Trên đây là những cách giúp các bạn tạo hiệu ứng bo tròn bằng CSS trên các trình duyệt khác nhau. Tôi hi vọng bài viết này sẽ giúp các bạn trang trí cũng như cải thiện được trang web của mình thêm phần sinh động và bắt mắt hơn.