CSS gerundete Ecken

Question

Ich habe viele Codes für dieses gesehen, aber es scheint, dass keine von ihnen sehr gut oder überhaupt funktionieren. Ich habe Bilder für abgerundete Ecken verwendet, aber ich brauche den Code, so dass es die Grenze eines <table> runden wird. Die einzigen Lösungen, die ich für dieses Problem gefunden habe, sind Bilder in den Zellen an der Grenze. Kann ich noch etwas versuchen?

Answer 1

Versuchen:

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

Dies funktioniert in Firefox, Safari, Chrome und alle anderen CSS3-kompatiblen Browser. Es kann einfacher sein, eine separate Klasse dafür zu erstellen - es gibt 3 Anweisungen, die für die volle Kompatibilität benötigt werden.

Versuchen Sie auch here (cssjuice.com) für einige weitere Techniken mit Bildern.

Ich bin nicht ganz sicher, ob dies mit einer Tabelle funktioniert, aber wenn Sie die volle Kontrolle haben - verwenden Sie kein <table> für das Layout. Bitte.

(Hinweis - ich denke, seine feinen die Tabelle Tag für tabellarische Daten zu verwenden, nur nicht, wo DIVs verwendet werden soll.)

aktualisieren: nur in eine Ecke gelten:

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

Weiter für topright oder top-right.

Answer 2

Die einzige Möglichkeit, Unterstützung für alle Browser zu erhalten, besteht darin, Bildhintergründe für die Anchor-Tags zu verwenden, die normalerweise auch mit einem Bild auf dem Container-Tag kombiniert werden.

Zum Beispiel mit HTML wie folgt aus:

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

ich ein Bild auf dem Anker-Tag legen würde, und eine auf der li, so dass das Element mit variabler Breite sein kann, und haben immer noch Ecken abgerundet.

Es gibt CSS3-Funktionen und JS-Lösungen, die ebenfalls funktionieren, aber nicht vollständig mit dem Browser kompatibel sind.

Answer 3

Versuchen Sie die CSS 3-Selektoren:

.element { 
border-radius:5px 
} 

Für Safari, Google Chrome (Webkit) und Mozilla die folgenden zwei Selektoren (obwohl Mozilla die CSS-3-Selektor (nicht sicher, ob der andere tut) unterstützt:

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

Answer 4

Sie können sie durch CSS Runde, aber nur für supported browsers.

Ihre anderen nicht-Bildoptionen sind skriptbasierte wie jQuery Corners oder ein ähnliches Skript.

Beide Methoden haben Vorbehalte (IE-Unterstützung, Besucher mit deaktiviertem JavaScript usw.). Wenn Sie sie verwenden möchten, würde ich mich darauf konzentrieren, sie mit CSS in den Browsern zu unterstützen, die sie unterstützen, und sicherstellen, dass sie ohne IE in IE akzeptabel sind.

Answer 5

Wenn Sie nicht mit allen Browsern arbeiten müssen, sollten Sie border-radius verwenden. Weitere Informationen finden Sie unter http://www.css3.info/preview/rounded-border/. Neuere Mozilla- und Webkit-basierte Browser unterstützen entweder dieses Tag oder moz-border-radius und -webkit-border-radius.

Answer 6

Hier ist ein Weg, der nicht Browser-abhängig ist (das weiß ich, es funktioniert auf den gängigen Browsern.) Es verwendet keine Tabelle, so müssen Sie die Tabelle in die am tiefsten verschachtelten div und es ist lang und schwer, aber es funktioniert. Die Bilder, auf die im folgenden Code Bezug genommen wird, sind die abgerundeten Ecken, die Sie selbst zeichnen. Der Radius der Ecke ist 44px.

Dies ist eine Variation auf: 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

Ich gehe davon aus, dass abgerundete Ecke CSS oben würde in IE6 nicht funktionieren. Etwas, das du dir merken solltest.

Drei gestapelte divs mit Hintergrundbildern ist der einfachste Ansatz.

Der Hintergrund für Ihr div mit ID Mitte würde vertikal durch CSS gekachelt werden. Funktioniert in IE6.

Answer 8

Ich neige dazu, mit der border-radius Option Person-B früher abgedeckt zu gehen.

Wenn ich IE unbedingt unterstützen muss (d. H. Es ist ein grundlegender Teil des Designs und nicht nur eine kleine Verbesserung), hatte ich Erfolg mit dd_Roundies, die VML verwendet, um die Arbeit zu erledigen.

Answer 9

Check out www.easyimg.com, einfache Lösung, die keine css Hacks oder Stunden in Photoshop benötigt.