Tạo box HTML có góc bo tròn với Curvy Corners

trong danh mục Javascript, Web Design

Hôm nay mình chia sẽ với các bạn một thư viện khá hiệu quả trong việc thiết kế giao diện cho website trong trường hợp bạn muốn tạo các box có góc bo tròn, nhưng không sử dụng image, đó là sử dụng 1 plugin của jquery, đó là curvy Corner.

Thư viện này có chức năng cũng tương đối hoành tráng, dung lượng đã minify là 27KB, nếu gzip chắc sẽ khoảng 15kB thôi. Còn chức năng cơ bản thì bo tròn các box bạn muốn.

curvycorner


Cách sử dụng mình thấy là đơn giản nhất trong các thư viện tạo góc bo tròn, sau khi include script này:

thì mình chẳng còn đụng gì tới javascript để khởi tạo, hay thiết lập cái gì cả, plugin này sẽ tự động tìm trong CSS các box nào bạn quy định bo tròn góc.
vd thẻ div có “div.test {-webkit-border-radius: 4px; -moz-border-radius: 4px;}”, đối với các trình duyệt mới và không phải IE6,7..thì nó sẽ tự động bo tròn mà không cần sử dụng script này, còn đối với các trình duyệt không hỗ trợ bo tròn, thì script này sẽ bo tròn giúp bạn. Hoàn toàn tự động.

Tuy nhiên, trong một số trường hợp không phải lúc nào cũng hoạt động vì mọi người biết là Browser là trăm hoa đua nở… nhưng mình thấy nó là plugin cung cấp chức năng này khá hữu hiệu.

Website: http://www.curvycorners.net/
Demo: http://www.curvycorners.net/demos/

6 bình luận

  1. wpviet says:

    cũng đau đầi hiều khi muốn bo tròn góc đó anh. nhưng em thấy cách tối ưu nhất vẫn là dùng ảnh đó ạ. còn dúng css thì em thấy
    -moz-border-radius: 5px;
    border-radius: 5px;
    là đc rồi. đúng là ie hay google chrome ko đọc đc nhưng ff đọc đc.
    anh tìm xem có cái css nào hay hơn mà đều đọc dc tất không em cam ơn nhiều lắm ạ

    [Reply]

    admin Reply:

    Hiện tại không có CSS nào mà áp dụng được cho tất cả trình duyệt. Theo mình thấy thì hiện tại cái script ở trên là 1 trong những cái tốt nhất để làm việc này. Script này có cơ chế nhận biết trình duyệt nào không triển khai corner theo CSS thì nó sẽ dùng js để bo tròn, ngược lại thì khỏi cần xử lý js.

    [Reply]

  2. wpviet says:

    thank cảm ơn anh

    [Reply]

  3. WhiteKnight says:

    Không hoạt động trên IE7, có cách nào hoạt động trên IE không?

    [Reply]

    Tấn Việt Reply:

    @WhiteKnight,

    Bạn có thể sử dụng thư viện Curved Corner để bo tròn trên IE. Đọc thêm bài viết bo tròn góc này để hiểu hơn. Chúc vui.

    [Reply]

  4. tuyet nhi says:

    hic hic ko hoạt động trên ie, có cách nào ko ạ em đang cần

    [Reply]

Gởi bình luận