Biên giới góc cong cho một div

Question

Tôi cần phải tạo một div có đường viền góc cong, với việc sử dụng bất kỳ hình ảnh nào trong góc. Có thể không?

Tôi không muốn chèn hình ảnh cong vào góc, Vui lòng giúp tôi liên quan đến điều này.

Answer 1

http://www.curvycorners.net/

Hãy thử thư viện này, điều đó đã làm tôi ngạc nhiên! Nó là một giải pháp trình duyệt chéo được kiểm tra.

Answer 2

Bạn có thể sử dụng CSS để đạt được góc tròn trong các trình duyệt hiện đại ...

border-radius: 10px; 

Handy Generator

này được gọi là progressive enhancement. IMO, đây là tốt hơn so với hình ảnh và hoặc thủ thuật CSS với lề và biên giới. Trừ khi bạn hoàn toàn phải có góc tròn.

Answer 3

Nếu bạn muốn dựa vào webkit và mozilla trình duyệt, bạn có thể sử dụng các lệnh css sau:

.radius { 
-moz-border-radius: 6px; 
-webkit-border-radius:6px; 
border-radius: 6px; 
    } 

chi tiết có thể được xem here. Thông tin

trên CSS2 đặc tả border-radius có thể tìm thấy here

Những tiếc là không làm việc cho ví dụ.

bạn có thể đi một tuyến javascript cho IE chỉ bằng cách sử dụng niftycube có lợi ích bổ sung hỗ trợ san lấp mặt bằng chiều cao cột mà không gặp sự cố.

Answer 4

Đây là một trong những tôi đã viết rằng bạn đang chào đón để sử dụng nếu bạn thích nó. Nó làm cho một hộp tròn góc của bất kỳ kích thước với một màu nền nhưng không phải là một biên giới xung quanh toàn bộ hộp. Nó dành cho nền trang trắng, nhưng có thể thay đổi bằng cách chỉnh sửa màu đường viền trong các kiểu c1, c2 & c3.

.rounded {background-color:#f1f0f1} 
.rounded .inner {padding:8px 10px 8px 12px} 
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px} 
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px} 
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px} 


    <div class="rounded" style="width:200px;height:100px"> 
    <div class="c1"></div><div class="c2"></div><div class="c3"></div> 
     <div class="inner"> 
     -- Content Here -- 
     </div> 
     <div class="c3"></div><div class="c2"></div><div class="c1"></div> 
    </div> 

Answer 5

Tôi muốn sử dụng plugin jQuery để xử lý các góc tròn. Dưới đây là danh sách các plugin góc tròn sẵn có trên trang web jQuery: http://plugins.jquery.com/taxonomy/term/189