Bo tròn góc DIV với CSS và Javascript

[HuyLord]

Code:

http://www.curvycorners.net/usage.php

Đọc hồi là làm được, Ai có thời gian + vốn tiếng anh dịch dùm rùi share cho anh em khác.. :-D:

[TeenV-©§e'†™]

Hướng dẫn sử dụng

Sau đây sẽ hướng dẫn các góc tròn của một yếu tố DIV với một bán kính 20 điểm ảnh.

Bạn có thể tải về phiên bản mới nhất của curvyCorners từ phần hoặc tải về bằng cách nhấn vào đây.

Một khi bạn đã tải về các tập tin, sao chép nó vào trang web của bạn. Sau đó, sao chép mã dưới đây và dán nó vào trong phần đầu của trang web của bạn. Nếu bạn lưu các tập tin ở bất cứ nơi nào khác hơn là những người chủ của trang web, sửa đổi các src địa điểm dưới đây.

Code:

<script type="text/JavaScript" src="curvycorners.js"></script>

Kế tiếp tạo ra một yếu tố DIV. Nếu bạn đã có một DIV mà bạn muốn tròn của các góc sau đó tất cả những gì bạn cần làm là cung cấp cho các DIV một ID.

Code:

<DIV id="myDiv"></DIV>

curvyCorners sẽ tự động pickup theo phong cách thông tin từ các yếu tố DIV. Vì vậy, ví dụ như nếu bạn cho một DIV 2px đen biên giới trong một stylesheet thì biên giới sẽ được tự động thêm vào các góc tròn.

Tiếp theo, chúng tôi cần phải thêm một số mã JavaScript để tải khi tải trang web. Trong phần HEAD của trang web của bạn thêm những điều sau đây:

Code:

<script type="text/JavaScript">

  window.onload = function()
  {
    settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true,
      autoPad: false
    }

    var divObj = document.getElementById("myDiv");

    var cornersObj = new curvyCorners(settings, divObj);
    cornersObj.applyCornersToAll();
  }

</script>


[TeenV-©§e'†™]

Breaking it down
Tôi không có thời gian để viết đầy đủ API để phần này sẽ thử và đi vào chi tiết càng nhiều càng tốt.

Các Cài đặt

Đầu tiên một phần của ví dụ trước đó tạo ra một biến gọi là cài đặt, bạn có thể thay đổi này cho bất kỳ tên biến mà bạn muốn, bạn sẽ cần phải sử dụng các biến này về sau trong tập lệnh. Biến này chứa tất cả các cài đặt cần thiết cho các đối tượng curvyCorners để làm việc.

Mỗi dòng của các cài đặt là một đối tượng cụ thể cài đặt, ví dụ như dòng đầu tiên vi: (bán kính: 20), cho biết các tập lệnh mà bạn muốn ở góc phía trên bên phải của bạn vào ô có một góc bán kính 20 điểm ảnh.

Tiếp theo ba dòng đặt radiuses cho ba góc khác. Vì vậy, ví dụ như nếu bạn muốn có những góc radiuses được 20, 40, 60 và 80 từ đầu trang dưới cùng bên phải sang bên trái để cài đặt đối tượng của bạn sẽ trông giống như ví dụ dưới đây.

Code:

 settings = {
      tl: { radius: 20 },
      tr: { radius: 40 },
      bl: { radius: 60 },
      br: { radius: 80 },
      antiAlias: true,
      autoPad: false
    }

Điều gì về vuông góc? Nói rằng bạn không muốn phía trên bên phải và bên trái góc dưới cùng sẽ được làm tròn và vẫn còn ở tất cả các hình vuông, bạn thay thế các bracketed phần bên phải của mỗi chấm ( với những từ khóa sai. Hãy xem ví dụ dưới đây.

Code:

settings = {
      tl: { radius: 20 },
      tr: false,
      bl: false,
      br: { radius: 80 },
      antiAlias: true,
      autoPad: false
    }

Anti-Aliasing?

Thay đổi giá trị của antiAlias từ đúng để false sẽ Toggle the anti-aliasing. Tắt anti-aliasing sẽ giảm Smoothness của các góc, nhưng sẽ làm tăng đáng kể thời gian cần thiết để vẽ vẽ các góc.

Padding?

Cuối cùng cài đặt được gọi là autoPad. Một lần nữa việc này có thể được đặt để, hoặc đúng hoặc sai. Theo mặc định, và DIVs đó làm cho việc sử dụng có thể không có curvyCorners padding áp dụng. Điều này là bởi vì padding messes lên các góc mà curvyCorners tạo ra.

Các cách để sửa lỗi này là tạo ra một bên trong DIV trong DIV mà bạn muốn tròn. Sau đó bạn có thể áp dụng padding này DIV. Hãy xem ví dụ dưới đây.

Code:

<style>
.innerDIV{
padding: 20px;
}
</style>

...

<DIV id="myDiv">
  <DIV class="innerDIV">
  Your content here
  </DIV>
</DIV>

Nếu bạn đặt autoPad cho đúng, các tập lệnh curvyCorners sẽ tự động tạo ra bên trong DIV cho bạn và di chuyển tất cả các nội dung của bạn từ chính DIV DIV vào bên trong và áp dụng bất kỳ padding bạn đã xác định trong stylesheet của bạn cho bên ngoài DIV.

[TeenV-©§e'†™]

Để xác định đó DIVs tròn.

Tiếp theo một phần của mã initialises các curvyCorners đối tượng.

Việc có hai cách khác nhau của DIVs xác định mà bạn muốn các tập lệnh để tròn. Phương pháp đầu tiên là phải vượt qua một hay nhiều đối tượng DIV khi tạo mới curvyCorners dụ của các đối tượng.

Code:

 var divObj = document.getElementById("myDiv");

    var cornersObj = new curvyCorners(settings, divObj);

Cho phép vi phạm các mã trên xuống. Dòng đầu tiên sử dụng các DOMs document.getElementById () phương pháp để trở về một đối tượng tham chiếu đến 'myDiv' gọi là divObj. Thay đổi myDiv với các ID của các DIV yếu tố mà bạn muốn tròn.

Dòng kế tiếp tạo ra mới dụ curvyCorners của các đối tượng và các cửa hàng trả lại các đối tượng trong một biến gọi là cornersObj.

Các đối tượng curvyCorners trong ví dụ này có hai tham số. Param đầu tiên là các cài đặt đối tượng mà chúng tôi tạo ra trước đó.

Thứ hai, param phải là một đối tượng tham chiếu đến DIV bạn muốn tròn. Chúng tôi lấy điều này ở các dòng đầu tiên của mẫu mã ở trên.

Lưu ý: Bạn có thể vượt qua nhiều hơn là một trong những đối tượng khi gọi curvyCorners các đối tượng. Để cung cấp thêm các đối tượng chỉ cần làm theo các API thông tin dưới đây. Mỗi đối tượng bổ sung thông qua sẽ có cùng một góc cài đặt ứng dụng, như được cung cấp trong các tham số đầu tiên. Nếu bạn cần thêm DIVs tròn khác nhau với các cài đặt sau đó bạn sẽ cần phải tạo additonal trường hợp của curvyCorners cho mỗi một trong những đối tượng cần phải cài đặt khác nhau.

Code:

newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);

Round by Class Name
The other way to specify which DIVs you want to apply rounded corners to, is to supply a CSS class name string as the second parameter insted of the DIV object as described above. Any DIVs the have that class applied will have their corners rounded.
See example below.

Code:

var cornersObj = new curvyCorners(settings, "myClassName");

...

<DIV id="myDiv" class="myClassName">
</DIV>

Các cuối cùng để làm gì để gọi điện cho applyCornersToAll phương pháp mà sau đó sẽ áp dụng curvy góc để cung cấp tất cả các yếu tố.

Code:

cornersObj.applyCornersToAll();

Nếu bạn cần thêm thông tin, sau đó chỉ cần kiểm tra các tập lệnh của mã nguồn, nó cũng nhận xét.

Nếu bạn có bất kỳ câu hỏi nào, ý kiến, ý tưởng hay mà bạn đã tìm thấy một lỗi sau đó xin vui lòng sử dụng diễn đàn bằng cách nhấp vào thẻ tab ở trên diễn đàn.

Vui chơi, Cameron.

[TeenV-©§e'†™]

Em không bjk cần chỗ nào nên dịck cả trang
Nhìu chỗ cũng không bjk từ thông cảm nha

[CPFounder]

Em không bjk cần chỗ nào nên dịck cả trang
nhiều chỗ cũng không bjk từ thông cảm nha

Rất hay bạn ạ. Mình sẽ tổng hợp lại và đưa vcào khu mẹo vặt về CSS nhé.

[love]

hic sao dài thế hic hu

[sandyanh]

hjc, you này dịch bằng google translate =.=! đọc chả hiểu gì sất

[nhantaidatviet]

Code:

<style type="text/css">
    div#conner {
          margin: 0 10%;background: #9FB779
    }
    b.rtop, b.rbottom {
          display:block;background: #FFF
    }
    b.rtop b, b.rbottom b {
        display:block;
        height: 1px;
        overflow: hidden;
        background: #9FB779
    }
    b.r1 {
        margin: 0 5px
    }
    b.r2 {
        margin: 0 3px
    }
    b.r3 {
        margin: 0 2px
    }
    b.rtop b.r4, b.rbottom b.r4 {
        margin: 0 1px;height: 2px
    }
</style>

Đó là đoạn code định nghĩa CSS

Còn đoạn sau thì cho vào <body>

<div id="conner" align="center">
    <b class="rtop">
          <b class="r1"></b>
          <b class="r2"></b>
          <b class="r3"></b>
          <b class="r4"></b>
    </b>
    <h4>Nội dung cần thể hiện</h4>
    <b class="rbottom">
          <b class="r4"></b>
          <b class="r3"></b>
          <b class="r2"></b>
          <b class="r1"></b>
    </b>
</div>


Giải thích thế này:
ở đoạn dưới sẽ gọi ra b.rtop ở đoạn trên
Tương tự với b.rbottom, b.r1, b.r2, b.r3 và b.r4

Ở đoạn css bên trên ta thấy
HTML Code:
b.r1{margin: 0 5px}

Nghĩa là lề trái+phải = 0px còn lề trên+dưới = 5px, tương tự:
với r2 là: lề trái+phải = 0px; lề trên+dưới = 3px
với r3 là: lề trái+phải = 0px; lề trên+dưới = 2px
với r4 là: lề trái+phải = 0px; lề trên+dưới = 1px (bằng với rtop và rbottom)

Nhìn lại đoạn code cho vào body ta thấy:

HTML Code:

<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4">
Nghĩa là gọi lần lượt theo thứ tự: rtop --> r1 --> r2 --> r3 -->r4
Với lề tăng giảm như trên kia thì nhìn nó sẽ bo tròn lại thôi

[duong8x]

để tui thử nghiệm đã rồi.... xét

[LyO]

thay vì cả đoạn này !

Code:

<style type="text/css">
    div#conner {
          margin: 0 10%;background: #9FB779
    }
    b.rtop, b.rbottom {
          display:block;background: #FFF
    }
    b.rtop b, b.rbottom b {
        display:block;
        height: 1px;
        overflow: hidden;
        background: #9FB779
    }
    b.r1 {
        margin: 0 5px
    }
    b.r2 {
        margin: 0 3px
    }
    b.r3 {
        margin: 0 2px
    }
    b.rtop b.r4, b.rbottom b.r4 {
        margin: 0 1px;height: 2px
    }
</style>

chỉ lấy đoạn này gắn thằng vào css của forum là được

Code:

  div#conner {
          margin: 0 10%;background: #9FB779
    }
    b.rtop, b.rbottom {
          display:block;background: #FFF
    }
    b.rtop b, b.rbottom b {
        display:block;
        height: 1px;
        overflow: hidden;
        background: #9FB779
    }
    b.r1 {
        margin: 0 5px
    }
    b.r2 {
        margin: 0 3px
    }
    b.r3 {
        margin: 0 2px
    }
    b.rtop b.r4, b.rbottom b.r4 {
        margin: 0 1px;height: 2px
    }

[T2Y]

Hết sức đơn giản , bạn chỉ cần bỏ code sau vào css

Code:

* {-moz-border-radius: 7px; -webkit-border-radius: 7px;}

a{text-decoration: none;}

thấy có nhiều skin khi rip cũng được vo tròn , nhưng có nhiều mem ko hiểu cách làm
( tặng cho chú Markchan đó nhé )
Chúc các bạn thành công ,
Demo

[Dạ Khúc]

* {-moz-border-radius: 7px; -webkit-border-radius: 7px;}

a{text-decoration: none;}

rất đơn giản chỉ cần bỏ cái này vào css



dc thì thanks cái cho mình nha

[thienan]

Cảm ơn T2T nhiều lém ....mau lẹ quá trùi lun..heheheheeeee..

[hunghsmn]

Mình đang định nói cái này thì nói mất rồi
Mình cũng dịnh nói thêm chuyện bo tròn góc riêng từng thứ, nghĩa là thích đâu thì bo đó chứ không phải toàn bộ vì không phải bất cứ chỗ nào bo cũng đẹp, cũng chỉ vài dòng trong CSS rất đơn giản, nhưng bây giờ có vẻ thừa rồi Đâu cần phải phức tạp hóa lên như vậy nhỉ. Cả một đống công việc xem bắt rối cả mắt mà chỉ để ... bo thôi thì ngại thật

[westlife]

Vâng, bác biết cách nào chỉ cháu với, cháu chỉ muốn bo tròn các nút trong phần viết bài với trả lời nhanh thôi.

[hunghsmn]

Vâng, bác biết cách nào chỉ cháu với, cháu chỉ muốn bo tròn các nút trong phần viết bài với trả lời nhanh thôi.

Thể theo yêu cầu bác giúp cháu đây:

Cháu tím trong CSS có đoạn:
button.button2, input.button2 {....}
Của bác mặc định nó như thế này:

Code:

button.button2, input.button2 {
   font-size: 0.7em;
   border: 1px solid #BCBCBC;
   width: auto !important;
   padding: 1px 0px;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   color: #000000;
   background-repeat: repeat-x;
   background-color: #FAFAFA;
   background-image: url('http://2img.net/i/fa/prosilver/bg_button.gif');
   background-position: top;
   overflow: visible;
   vertical-align:middle;
}

1/ Đơn giàn chỉ bo tròn góc: thêm vào 2 dòng này:

Code:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

2/ Nâng cao một chút - Tạo bóng, Thêm vào :

Code:

border-top : 1px solid #008000;
border-right : 3px solid #0080C0;
border-bottom : 3px solid #0080C0;
border-left : 1px solid #008000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

( Những con số ở cuối là mả màu của bóng, sửa lại theo ý thích)

Như thế này gọi là thích bo ở đâu thì bo, rất đơn giản phải không?

[westlife]

tks bác, cháu làm được rồi, rất đẹp

[Sponsored content]