CSS Góc tròn

Question

Tôi đã nhìn thấy rất nhiều mã cho điều này, nhưng nó xuất hiện không phải của họ làm việc rất tốt hoặc ở tất cả. Tôi đã sử dụng hình ảnh cho các góc tròn nhưng tôi cần mã để nó sẽ làm tròn đường viền của <table>. Các giải pháp duy nhất tôi đã tìm thấy cho vấn đề này là để có hình ảnh Trong các tế bào xung quanh biên giới. Bất cứ điều gì khác tôi có thể thử?

Answer 1

Hãy thử:

selector { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 

này sẽ làm việc trong Firefox, Safari, Chrome và bất kỳ trình duyệt CSS3-tương thích khác. Nó có thể dễ dàng hơn để tạo ra một lớp riêng biệt cho điều này - có 3 câu lệnh cần thiết cho khả năng tương thích đầy đủ.

Ngoài ra, hãy thử here (cssjuice.com) để biết thêm một số kỹ thuật sử dụng hình ảnh.

Tôi không hoàn toàn chắc chắn liệu điều này có hoạt động với bảng hay không, nhưng nếu bạn hoàn toàn kiểm soát - không sử dụng <table> để bố cục. Xin vui lòng.

(Lưu ý - Tôi nghĩ tốt đẹp của nó để sử dụng thẻ bảng cho dữ liệu bảng, chỉ cần không phải là nơi DIV nên được sử dụng.)

Cập nhật: để áp dụng cho chỉ có một góc:

-moz-border-radius-topleft: 3px; 
/* ... */ 
-webkit-border-top-left-radius: 3px; 

Tiếp tục topright hoặc top-right.

Answer 2

Cách duy nhất để có hỗ trợ cho tất cả các trình duyệt là sử dụng hình nền trên các thẻ liên kết, thường được kết hợp với một hình ảnh trên thẻ chứa của nó.

Ví dụ với HTML như thế này:

<ul> 
<li><a href="">something</a></li> 
<ul> 

tôi sẽ đặt một hình ảnh trên thẻ neo, và một trên li, do đó yếu tố có thể thay đổi chiều rộng và vẫn làm tròn góc.

Có các tính năng CSS3 và các giải pháp JS cũng có thể hoạt động nhưng không hoàn toàn tương thích với trình duyệt.

Answer 3

Thử CSS 3 Selectors:

.element { 
border-radius:5px 
} 

Đối với Safari, Google Chrome (Webkit) và Mozilla sử dụng hai bộ chọn sau (mặc dù Mozilla hỗ trợ CSS 3 selector (không chắc chắn nếu một trong những khác không):

.element { 
-webkit-border-radius:5px; 
-moz-border-radius:5px; 
} 

Answer 4

Bạn có thể khỏa lấp chúng thông qua CSS nhưng chỉ cho supported browsers.

tùy chọn không phải hình ảnh khác của bạn là kịch bản dựa trên như jQuery Corners hoặc một tập lệnh tương tự.

Cả hai phương pháp này đều có sự cẩn trọng (hỗ trợ IE, khách truy cập đã tắt JavaScript, v.v.). Nếu bạn đang sử dụng chúng, tôi sẽ tập trung vào việc làm cho chúng hoạt động với CSS trong các trình duyệt hỗ trợ nó và chỉ đảm bảo rằng nó có thể chấp nhận được nếu không có chúng trong IE.

Answer 5

Nếu bạn không phải làm việc với tất cả các trình duyệt, hãy xem xét sử dụng bán kính đường viền. Xem http://www.css3.info/preview/rounded-border/ để biết thêm thông tin. Các trình duyệt Mozilla và Webkit mới hơn hỗ trợ thẻ này hoặc bán kính biên giới moz và -webkit-border-radius.

Answer 6

Đây là cách không phụ thuộc vào trình duyệt (mà tôi biết, nó hoạt động trên các trình duyệt phổ biến.) Nó không sử dụng một bảng, vì vậy bạn sẽ phải đặt bảng trong lồng nhau sâu nhất div và nó dài và nặng, nhưng nó hoạt động. Các hình ảnh được đề cập trong mã bên dưới là các góc tròn mà bạn tự vẽ. Bán kính góc là 44px.

Đây là một biến thể của: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

<div class="tl"> 
    <div class="tr"> 
     <div class="bl"> 
      <div class="br"> 
       <div class="t"> 
        <div class="b"> 
         <div class="l"> 
          <div class="r"> 
           <div>Do or do not, there is no try</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

.tl 
{ 
    font-family: Verdana, Arial; 
    font-size: 16px; 
    position: relative; 
    left: 30px; 
} 

.tl, .tr, .bl, .br 
{ 
    width: 655px; 
    height: 250px; 
} 

.t 
{ 
    width: 567px; 
    height: 250px;  
    margin: 0 0 0 44px; 
} 

.b 
{ 
    width: 567px; 
    height: 250px;  
} 

.l 
{ 
    width: 655px; 
    height: 162px;  
    margin: 44px 0 0 -44px; 
} 

.r 
{ 
    width: 655px; 
    height: 162px; 
} 

.bl 
{ 
    background: url(/images/front/rcbla.png) 0 100% no-repeat; 
} 

.br 
{ 
    background: url(/images/front/rcbra.png) 100% 100% no-repeat; 
} 

.tl 
{ 
    background: url(/images/front/rctla.png) 0 0 no-repeat; 
} 

.tr 
{ 
    background: url(/images/front/rctra.png) 100% 0 no-repeat; 
} 

.t 
{ 
    background: url(/images/front/adot.png) 0 0 repeat-x; 
} 

.b 
{ 
    background: url(/images/front/adot.png) 0 100% repeat-x; 
} 

.l 
{ 
    background: url(/images/front/adot.png) 0 0 repeat-y; 
} 

.r 
{ 
    background: url(/images/front/adot.png) 100% 0 repeat-y; 
} 

Answer 7

Tôi giả định rằng tròn góc CSS ở trên sẽ không làm việc trong IE6. Một cái gì đó bạn có thể muốn ghi nhớ.

Ba div được xếp chồng với hình nền là cách tiếp cận dễ nhất.

<div class="top">&nbsp;</div> 
<div class="mid"> <!-- content --> </div> 
<div class="bottom">&nbsp;</div> 

Nền cho div của bạn có id giữa sẽ được lát theo chiều dọc qua CSS. Hoạt động trong IE6.

Answer 8

Tôi có xu hướng sử dụng tùy chọn border-radius người-b được đề cập trước đó.

Nếu tôi hoàn toàn phải hỗ trợ IE (tức là nó là một phần cơ bản của thiết kế và không chỉ là một chút cải tiến), tôi đã có một số thành công với dd_Roundies, sử dụng VML để hoàn thành công việc.

Answer 9

Kiểm tra www.easyimg.com, giải pháp đơn giản không yêu cầu css hacks hoặc giờ trong photoshop.