Tạo các góc tròn bằng CSS [đã đóng]

Làm cách nào để tạo các góc tròn bằng CSS?

Kể từ khi CSS3 được giới thiệu, cách tốt nhất để thêm các góc tròn bằng CSS là sử dụng thuộc border-radiustính. Bạn có thể đọc thông số kỹ thuật trên tài sản hoặc nhận một số thông tin triển khai hữu ích trên MDN :

Nếu bạn đang sử dụng một trình duyệt không triển khai border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), thì các liên kết bên dưới sẽ trình bày chi tiết một loạt các phương pháp khác nhau. Tìm một cái phù hợp với trang web của bạn và phong cách mã hóa, và đi với nó.

1. Thiết kế CSS: Tạo góc và đường viền tùy chỉnh
2. Góc làm tròn CSS 'Roundup'
3. 25 kỹ thuật góc tròn với CSS

Tôi đã xem xét điều này từ rất sớm khi tạo Stack Overflow và không thể tìm thấy bất kỳ phương pháp tạo ra các góc tròn không khiến tôi cảm thấy như mình vừa đi qua một cái cống.

CSS3 không cuối cùng xác định các

border-radius:

Đó chính xác là cách bạn muốn nó hoạt động. Mặc dù điều này hoạt động tốt trong các phiên bản Safari và Firefox mới nhất, nhưng hoàn toàn không có trong IE7 (và tôi không nghĩ trong IE8) hay Opera.

Trong khi đó, nó bị hack hoàn toàn. Tôi muốn nghe những gì người khác nghĩ là cách sạch nhất để làm điều này trên IE7, FF2 / 3, Safari3 và Opera 9.5 tại thời điểm này ..

Tôi thường nhận được các góc tròn chỉ bằng css, nếu trình duyệt không hỗ trợ họ sẽ thấy nội dung có các góc phẳng. Nếu các góc tròn không quá quan trọng cho trang web của bạn, bạn có thể sử dụng các dòng dưới đây.

Nếu bạn muốn sử dụng tất cả các góc có cùng bán kính thì đây là cách dễ dàng:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

nhưng nếu bạn muốn kiểm soát mọi góc thì điều này là tốt:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Như bạn thấy trong mỗi bộ, bạn có các kiểu cụ thể của trình duyệt và trên các hàng thứ tư, chúng tôi tuyên bố theo cách tiêu chuẩn bằng cách này, chúng tôi giả sử nếu trong tương lai những người khác (hy vọng IE cũng vậy) quyết định thực hiện tính năng này để sẵn sàng cho chúng.

Như đã nói trong các câu trả lời khác, điều này hoạt động rất tốt trên Firefox, Safari, Camino, Chrome.

Nếu bạn quan tâm đến việc tạo các góc trong IE thì điều này có thể được sử dụng - http://css3pie.com/

Tôi sẽ khuyên bạn nên sử dụng hình ảnh nền. Các cách khác không tốt bằng: Không đánh dấu răng cưa và đánh dấu vô nghĩa. Đây không phải là nơi để sử dụng JavaScript.

Như Brajeshwar đã nói: Sử dụng border-radiusbộ chọn css3. Đến bây giờ, bạn có thể áp dụng -moz-border-radiusvà-webkit-border-radius cho các trình duyệt dựa trên Mozilla và Webkit tương ứng.

Vậy, điều gì xảy ra với Internet Explorer?. Microsoft có nhiều hành vi để làm cho Internet Explorer có một số tính năng bổ sung và có thêm kỹ năng.

Đây: một .htctập tin hành vi để có được round-cornerstừborder-radius giá trị trong CSS của bạn. Ví dụ.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Tất nhiên, bộ chọn hành vi không phải là bộ chọn hợp lệ, nhưng bạn có thể đặt nó trên một tệp css khác với các nhận xét có điều kiện (chỉ dành cho IE).

Tập tin hành vi của HTC

Với sự hỗ trợ cho CSS3 được triển khai trong các phiên bản Firefox, Safari và Chrome mới hơn, cũng sẽ hữu ích khi xem xét "Border Radius".

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

Giống như bất kỳ tốc ký CSS nào khác, phần trên cũng có thể được viết ở định dạng mở rộng và do đó đạt được Border Radius khác nhau cho topleft, topright, v.v.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQuery là cách tôi sẽ giải quyết vấn đề này. Hỗ trợ css là tối thiểu, hình ảnh quá khó, để có thể chọn các yếu tố bạn muốn có các góc tròn trong jQuery có ý nghĩa hoàn hảo với tôi mặc dù một số người sẽ không nghi ngờ gì nữa. Có một plugin tôi mới sử dụng cho một dự án tại nơi làm việc ở đây: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Luôn luôn có cách JavaScript (xem các câu trả lời khác) nhưng vì nó hoàn toàn là kiểu dáng, tôi không thích sử dụng các tập lệnh máy khách để đạt được điều này.

Cách tôi thích (mặc dù có giới hạn của nó), là sử dụng 4 hình ảnh góc tròn mà bạn sẽ định vị trong 4 góc của hộp bằng CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Như đã đề cập, nó có giới hạn của nó (nền phía sau hộp tròn nên đơn giản nếu không các góc sẽ không khớp với nền), nhưng nó hoạt động rất tốt cho mọi thứ khác.

Đã cập nhật: Cải thiện hàm ý bằng cách sử dụng bảng sprite.

Cá nhân tôi thích giải pháp này là tốt nhất, đó là một .htc để cho phép IE hiển thị các đường viền cong.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Trong Safari, Chrome, Firefox> 2, IE> 8 và Konquerer (và có thể là những người khác) bạn có thể làm điều đó bằng CSS bằng cách sử dụng thuộc border-radiustính. Vì nó chưa chính thức là một phần của thông số kỹ thuật, vui lòng sử dụng tiền tố cụ thể của nhà cung cấp ...

Thí dụ

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Các giải pháp JavaScript thường thêm một đống divs nhỏ để làm cho nó trông tròn hoặc chúng sử dụng các đường viền và lề âm để tạo các góc 1px. Một số cũng có thể sử dụng SVG trong IE.

IMO, cách CSS tốt hơn, vì nó dễ dàng và sẽ xuống cấp một cách duyên dáng trong các trình duyệt không hỗ trợ nó. Tất nhiên, đây chỉ là trường hợp máy khách không thực thi chúng trong các trình duyệt không được hỗ trợ như IE <9.

Đây là một giải pháp HTML / js / css mà tôi đã làm gần đây. Có lỗi làm tròn 1px với định vị tuyệt đối trong IE, do đó bạn muốn vùng chứa có số pixel rộng bằng nhau, nhưng nó khá sạch.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

Hình ảnh chỉ rộng 18px và có tất cả 4 góc được đóng gói cùng nhau. Trông giống như một vòng tròn.

Lưu ý: bạn không cần trình bao bọc bên trong thứ hai, nhưng tôi thích sử dụng lề trên trình bao bọc bên trong để lề trên đoạn văn và tiêu đề vẫn duy trì thu hẹp lề. Bạn cũng có thể bỏ qua jquery và chỉ cần đặt trình bao bọc bên trong trong html.

Như một dấu hiệu cho thấy mức độ phức tạp của việc làm cho các góc tròn hoạt động, thậm chí Yahoo không khuyến khích chúng (xem điểm đầu tiên)! Cấp, họ chỉ nói về các góc tròn 1 pixel trong bài viết đó nhưng thật thú vị khi thấy rằng ngay cả một công ty có chuyên môn của họ đã kết luận rằng họ chỉ quá đau đớn để khiến họ làm việc hầu hết thời gian.

Nếu thiết kế của bạn có thể tồn tại mà không có chúng, đó là giải pháp dễ nhất.

Chắc chắn, nếu đó là một chiều rộng cố định, nó cực kỳ dễ sử dụng CSS và không hề gây khó chịu hay tốn công sức. Đó là khi bạn cần nó để mở rộng theo cả hai hướng mà mọi thứ trở nên khó khăn. Một số giải pháp có số lượng div đáng kinh ngạc xếp chồng lên nhau để thực hiện.

Giải pháp của tôi là ra lệnh cho nhà thiết kế rằng nếu họ muốn sử dụng các góc tròn (trong thời điểm hiện tại), thì nó cần phải có chiều rộng cố định. Các nhà thiết kế thích các góc tròn (tôi cũng vậy), vì vậy tôi thấy đây là một sự thỏa hiệp hợp lý.

Biên giới Ruzee là giải pháp góc tròn chống răng cưa duy nhất dựa trên Javascript mà tôi thấy, nó hoạt động trong tất cả các trình duyệt chính (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8) và CSONG là duy nhất hoạt động khi cả phần tử được làm tròn VÀ phần tử cha chứa hình nền. Nó cũng có biên giới, bóng tối và phát sáng.

RUZEE.ShadedBorder mới hơn là một tùy chọn khác, nhưng nó thiếu hỗ trợ để lấy thông tin kiểu từ CSS.

Nếu bạn đi với giải pháp bán kính đường viền, có trang web tuyệt vời này để tạo css sẽ làm cho nó hoạt động cho safari / chrome / FF.

Dù sao, tôi nghĩ rằng thiết kế của bạn không nên phụ thuộc vào góc tròn và nếu bạn nhìn vào Twitter, họ chỉ nói F **** với người dùng IE và opera. Các góc được làm tròn là một điều tuyệt vời và cá nhân tôi vẫn giữ điều này cho những người dùng tuyệt vời không sử dụng IE :).

Bây giờ tất nhiên đó không phải là ý kiến ​​của khách hàng. Đây là liên kết: http://border-radius.com/

Ngoài các giải pháp htc được đề cập ở trên, đây là một giải pháp và ví dụ khác để tiếp cận các góc tròn trong IE .

Không có cách "tốt nhất"; có những cách phù hợp với bạn và những cách không phù hợp. Phải nói rằng, tôi đã đăng một bài viết về việc tạo CSS + Kỹ thuật góc tròn dựa trên hình ảnh ở đây:

Hộp có góc tròn sử dụng CSS và hình ảnh - Phần 2

Tổng quan về thủ thuật này là sử dụng các DIV lồng nhau và lặp lại và định vị hình ảnh nền. Đối với bố cục chiều rộng cố định (chiều cao có thể kéo dài chiều rộng cố định), bạn sẽ cần ba DIV và ba hình ảnh. Để bố trí chiều rộng chất lỏng (chiều rộng và chiều cao có thể kéo dài), bạn sẽ cần chín DIV và chín hình ảnh. Một số người có thể coi nó quá phức tạp nhưng IMHO là giải pháp gọn gàng nhất từ ​​trước đến nay. Không hack, không JavaScript.

Tôi đã viết một bài viết trên blog này một thời gian trước, vì vậy để biết thêm thông tin, xem tại đây

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Nó hoạt động khá tốt. Không cần Javascript, chỉ cần CSS và HTML. Với HTML tối thiểu can thiệp vào các công cụ khác. Nó rất giống với những gì Mono đã đăng, nhưng không chứa bất kỳ bản hack cụ thể nào của IE 6 và sau khi kiểm tra, dường như không hoạt động. Ngoài ra, một mẹo khác là làm cho phần bên trong của mỗi hình ảnh góc trong suốt để nó không chặn văn bản ở gần góc. Phần bên ngoài không được trong suốt để có thể che đi đường viền của div không tròn.

Ngoài ra, một khi CSS3 được hỗ trợ rộng rãi với bán kính đường viền, đó sẽ là cách tốt nhất chính thức để tạo các góc tròn.

Không sử dụng CSS, jQuery đã được đề cập nhiều lần. Nếu bạn cần kiểm soát hoàn toàn nền và đường viền của các phần tử của mình, hãy thử Plugin Canvas nền jQuery . Nó đặt một phần tử HTML5 Canvas trong nền và cho phép bạn vẽ mọi nền hoặc đường viền bạn muốn. Góc tròn, độ dốc và như vậy.

Opera chưa hỗ trợ bán kính đường viền (dường như nó sẽ được phát hành sau phiên bản 10). Trong khi đó, bạn có thể sử dụng CSS để đặt nền SVG để tạo hiệu ứng tương tự .