einfache abgerundete Ränder mit JQUERY oder etwas anderes

Question

Duplizieren:

• What is the best way to create rounded corners
• How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?
• jQuery rounded corners

Kennen Sie einen Weg, abgerundete Ränder zu machen Elemente div. Ich benutzte ruzee, aber ich habe Problem, CalenderExtender (asp.net Ajax) und GMDatePicker Komponenten zu verwenden.

Answer 1

In CSS 3 wird es einen Standard dafür geben. Heute können Sie es tun (nur für Mozilla und WebKit-basierten Browsern) mit:

.roundBorder { 
    -moz-border-radius: 1em; 
    -webkit-border-radius: 1em; 
} 

Ansonsten mehrere divs mit backgound-Bilder verwenden können, aber JQuery wird eine einfachere Art und Weise zur Verfügung stellen (das weiß ich nicht über :()

Die mehrere div Art und Weise wie folgt aussehen könnte:

html:

<div class="topLeft"> 
    <div class="topRight"> 
     <div class="bottomLeft"> 
      <div class="bottomRight"> 
       <div class="content"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

css:

.topLeft { 
    background-image: url('topLeft.png'); 
    background-position: top left; 
    background-repeat: no-repeat; 
} 

.topRight { 
    background-image: url('topRight.png'); 
    background-position: top right; 
    background-repeat: no-repeat; 
} 

.bottomLeft { 
    background-image: url('bottomLeft.png'); 
    background-position: bottom left; 
    background-repeat: no-repeat; 
} 

.bottomRight { 
    background-image: url('bottomRight.png'); 
    background-position: bottom right; 
    background-repeat: no-repeat; 
} 

Answer 2

Sie könnten die border-radius -Eigenschaft CSS3 verwenden, aber dies wird noch nicht in IE unterstützt.

Answer 3

für JQuery, könnten Sie 'Corner' verwenden. Siehe here