Abgerundete Ecken mit CSS erstellen [geschlossen]

Wie kann ich mit CSS abgerundete Ecken erstellen?

Seit Einführung von CSS3 können Sie mit CSS am besten abgerundete Ecken mithilfe von CSS hinzufügen border-radius. Sie können die Spezifikation für die Eigenschaft lesen oder nützliche Implementierungsinformationen zu MDN abrufen :

Wenn Sie einen Browser verwenden, der nicht implementiert ist border-radius (Chrome vor Version 4, Firefox vor Version 4, IE8, Opera vor Version 10.5, Safari vor Version 5), werden in den folgenden Links eine Reihe verschiedener Ansätze beschrieben. Finden Sie eine, die zu Ihrer Site und Ihrem Codierungsstil passt, und machen Sie mit.

1. CSS-Design: Erstellen von benutzerdefinierten Ecken und Grenzen
2. CSS Rounded Corners 'Roundup'
3. 25 Abgerundete Ecken Techniken mit CSS

Ich habe mir das schon früh bei der Erstellung von Stack Overflow angesehen und konnte keine Methode finden , um abgerundete Ecken zu erstellen, bei denen ich nicht das Gefühl hatte, nur durch einen Abwasserkanal zu gehen.

CSS3 definiert schließlich das

border-radius:

Genau so soll es funktionieren. Dies funktioniert zwar in den neuesten Versionen von Safari und Firefox in Ordnung, aber überhaupt nicht in IE7 (und ich denke nicht in IE8) oder Opera.

In der Zwischenzeit sind es Hacks bis ganz nach unten. Ich bin daran interessiert zu hören, was andere Leute derzeit für den saubersten Weg halten, dies in IE7, FF2 / 3, Safari3 und Opera 9.5 zu tun.

Ich bekomme im Allgemeinen abgerundete Ecken nur mit CSS. Wenn der Browser dies nicht unterstützt, wird der Inhalt mit flachen Ecken angezeigt. Wenn abgerundete Ecken für Ihre Site nicht so wichtig sind, können Sie die folgenden Linien verwenden.

Wenn Sie alle Ecken mit demselben Radius verwenden möchten, ist dies der einfache Weg:

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

Aber wenn Sie jede Ecke kontrollieren wollen, ist das gut:

.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;
}

Wie Sie in jedem Satz sehen, haben Sie browserspezifische Stile und in den vierten Zeilen, die wir standardmäßig deklarieren, gehen wir davon aus, dass die anderen (hoffentlich auch der IE) in Zukunft die Funktion implementieren, damit unser Stil auch für sie bereit ist.

Wie in anderen Antworten erwähnt, funktioniert dies hervorragend unter Firefox, Safari, Camino und Chrome.

Wenn Sie daran interessiert sind, Ecken im IE zu erstellen, kann dies von Nutzen sein - http://css3pie.com/

Ich würde empfehlen, Hintergrundbilder zu verwenden. Die anderen Möglichkeiten sind bei weitem nicht so gut: Kein Anti-Aliasing und sinnloses Markup. Dies ist nicht der richtige Ort, um JavaScript zu verwenden.

Wie Brajeshwar sagte: Verwenden des border-radiusCSS3-Selektors. Inzwischen können Sie sich bewerben -moz-border-radiusund -webkit-border-radiusfür Mozilla und WebKit - Browser basiert auf.

Was passiert mit Internet Explorer? Microsoft hat viele Verhaltensweisen, um Internet Explorer über einige zusätzliche Funktionen zu verfügen und mehr Fähigkeiten zu erlangen.

Hier: Eine .htcVerhaltensdatei, die round-cornersvom border-radiusWert in Ihrem CSS abgerufen werden soll. Beispielsweise.

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

Natürlich ist die Verhaltensauswahl keine gültige Auswahl, aber Sie können sie in eine andere CSS-Datei mit bedingten Kommentaren einfügen (nur für IE).

Die Verhaltens-HTC-Datei

Da die Unterstützung für CSS3 in neueren Versionen von Firefox, Safari und Chrome implementiert ist, ist es auch hilfreich, sich "Border Radius" anzusehen.

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

Wie bei jeder anderen CSS-Kurzform kann auch das oben Gesagte in erweitertem Format geschrieben werden, wodurch ein anderer Randradius für das obere linke, das obere Recht usw. erzielt wird.

-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;

Mit jQuery würde ich persönlich damit umgehen. Die CSS-Unterstützung ist minimal, die Bilder sind zu umständlich. Um die Elemente auswählen zu können, die in jQuery abgerundet werden sollen, ist dies für mich absolut sinnvoll, auch wenn einige zweifellos anders argumentieren. Hier ist ein Plugin, das ich kürzlich für ein Projekt bei der Arbeit verwendet habe: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Es gibt immer den JavaScript-Weg (siehe andere Antworten), aber da es sich nur um Styling handelt, bin ich irgendwie dagegen, Client-Skripte zu verwenden, um dies zu erreichen.

Ich bevorzuge (obwohl es seine Grenzen hat), 4 Bilder mit abgerundeten Ecken zu verwenden, die Sie mit CSS in den 4 Ecken Ihrer Box positionieren:

<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;
}

Wie bereits erwähnt, hat es seine Grenzen (der Hintergrund hinter dem abgerundeten Feld sollte glatt sein, sonst stimmen die Ecken nicht mit dem Hintergrund überein), aber es funktioniert sehr gut für alles andere.

Aktualisiert: Die Implementierung wurde mithilfe eines Sprite-Blatts verbessert.

Ich persönlich mag diese Lösung am besten, es ist eine .htc, mit der IE gekrümmte Ränder rendern kann.

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

In Safari, Chrome, Firefox> 2, IE> 8 und Konquerer (und wahrscheinlich auch in anderen) können Sie dies mithilfe der border-radiusEigenschaft in CSS tun . Da es noch nicht offiziell Teil der Spezifikation ist, verwenden Sie bitte ein herstellerspezifisches Präfix ...

Beispiel

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

Die JavaScript-Lösungen fügen im Allgemeinen einen Haufen kleiner divs hinzu, damit sie abgerundet aussehen, oder sie verwenden Ränder und negative Ränder, um gekerbte 1px-Ecken zu erstellen. Einige verwenden möglicherweise auch SVG im IE.

IMO, der CSS-Weg ist besser, da er einfach ist und sich in Browsern, die ihn nicht unterstützen, elegant verschlechtert. Dies ist natürlich nur dann der Fall, wenn der Client sie in nicht unterstützten Browsern wie IE <9 nicht erzwingt.

Hier ist eine HTML / js / css-Lösung, die ich kürzlich gemacht habe. Es gibt einen 1px-Rundungsfehler mit absoluter Positionierung im IE, sodass der Container eine gerade Anzahl von Pixeln breit sein soll, aber er ist ziemlich sauber.

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;
}

Das Bild ist nur 18 Pixel breit und hat alle 4 Ecken zusammen gepackt. Sieht aus wie ein Kreis.

Hinweis: Sie benötigen den zweiten inneren Wrapper nicht, aber ich verwende gerne einen Rand für den inneren Wrapper, damit die Ränder für Absätze und Überschriften den Randkollaps beibehalten. Sie können auch die Abfrage überspringen und einfach den inneren Wrapper in den HTML-Code einfügen.

Als Hinweis darauf, wie komplex es ist, abgerundete Ecken zum Laufen zu bringen, rät sogar Yahoo davon ab (siehe erster Punkt mit Aufzählungszeichen)! Zugegeben, in diesem Artikel geht es nur um 1 Pixel abgerundete Ecken, aber es ist interessant zu sehen, dass selbst ein Unternehmen mit seinem Fachwissen zu dem Schluss gekommen ist, dass sie einfach zu viel Schmerz haben , um sie die meiste Zeit zum Arbeiten zu bringen .

Wenn Ihr Design ohne sie überleben kann, ist dies die einfachste Lösung.

Sicher, wenn es eine feste Breite ist, ist es mit CSS super einfach und überhaupt nicht anstößig oder mühsam. Wenn Sie es in beide Richtungen skalieren müssen, werden die Dinge unruhig. Einige der Lösungen haben eine erstaunliche Anzahl von Divs, die übereinander gestapelt sind, um dies zu ermöglichen.

Meine Lösung besteht darin, dem Designer vorzuschreiben, dass er eine feste Breite haben muss, wenn er (vorerst) abgerundete Ecken verwenden möchte. Designer lieben abgerundete Ecken (ich auch), daher halte ich dies für einen vernünftigen Kompromiss.

Ruzee Borders ist die einzige auf Javascript basierende Anti-Alias-Lösung für abgerundete Ecken, die ich gefunden habe und die in allen gängigen Browsern (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8) funktioniert, und AUCH die einzige, die funktioniert, wenn Sowohl das abgerundete Element als auch das übergeordnete Element enthalten ein Hintergrundbild. Es macht auch Grenzen, Schatten und Leuchten.

Der neuere RUZEE.ShadedBorder ist eine weitere Option, es fehlt jedoch die Unterstützung für das Abrufen von Stilinformationen aus CSS.

Wenn Sie sich für die Border-Radius-Lösung entscheiden möchten, gibt es diese fantastische Website, auf der Sie das CSS generieren können, mit dem es für Safari / Chrome / FF funktioniert.

Wie auch immer, ich denke, Ihr Design sollte nicht von der abgerundeten Ecke abhängen, und wenn Sie sich Twitter ansehen, sagen sie den IE- und Opernbenutzern nur F ****. Abgerundete Ecken sind schön zu haben, und ich persönlich bin in Ordnung, dies für die coolen Benutzer zu behalten, die keinen IE verwenden :).

Jetzt ist es natürlich nicht die Meinung der Kunden. Hier ist der Link: http://border-radius.com/

Zusätzlich zu den oben erwähnten HTC-Lösungen finden Sie hier weitere Lösungen und Beispiele, um abgerundete Ecken im IE zu erreichen .

Es gibt keinen "besten" Weg; Es gibt Wege, die für Sie funktionieren und Wege, die nicht funktionieren. Trotzdem habe ich hier einen Artikel über das Erstellen von CSS + Image-basierten, flüssigen Round-Corner-Techniken veröffentlicht:

Box mit runden Ecken mit CSS und Bildern - Teil 2

Eine Übersicht über diesen Trick besteht darin, dass verschachtelte DIVs sowie die Wiederholung und Positionierung von Hintergrundbildern verwendet werden. Für Layouts mit fester Breite (dehnbare Höhe mit fester Breite) benötigen Sie drei DIVs und drei Bilder. Für ein flüssiges Breitenlayout (dehnbare Breite und Höhe) benötigen Sie neun DIVs und neun Bilder. Einige mögen es für zu kompliziert halten, aber meiner Meinung nach ist es die sauberste Lösung, die es je gab. Keine Hacks, kein JavaScript.

Ich habe vor einiger Zeit einen Blog-Artikel darüber geschrieben. Weitere Informationen finden Sie hier

<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>

Es funktioniert ganz gut. Kein Javascript erforderlich, nur CSS und HTML. Mit minimalem HTML-Eingriff, der die anderen Dinge stört. Es ist sehr ähnlich zu dem, was Mono gepostet hat, enthält jedoch keine IE 6-spezifischen Hacks und scheint nach Überprüfung überhaupt nicht zu funktionieren. Ein weiterer Trick besteht darin, den inneren Teil jedes Eckbilds transparent zu machen, damit kein Text blockiert wird, der sich in der Nähe der Ecke befindet. Der äußere Teil darf nicht transparent sein, damit er den Rand des nicht abgerundeten Div verdecken kann.

Sobald CSS3 mit Randradius weitgehend unterstützt wird, ist dies die offiziell beste Methode, um abgerundete Ecken zu erstellen.

Verwenden Sie kein CSS, jQuery wurde bereits mehrfach erwähnt. Wenn Sie die vollständige Kontrolle über den Hintergrund und den Rand Ihrer Elemente benötigen, probieren Sie das jQuery Background Canvas Plugin aus . Es platziert ein HTML5-Canvas-Element im Hintergrund und ermöglicht es Ihnen, jeden gewünschten Hintergrund oder Rand zu zeichnen. Abgerundete Ecken, Farbverläufe usw.

Opera unterstützt noch keinen Rahmenradius (anscheinend wird es in der Version nach Version 10 sein). In der Zwischenzeit können Sie mithilfe von CSS einen SVG-Hintergrund festlegen, um einen ähnlichen Effekt zu erzielen .