Abgerundete Ecken mit CSS erstellen [geschlossen]

StackOverflow https://stackoverflow.com/questions/7089

Frage

Wie kann ich mit CSS abgerundete Ecken erstellen?

War es hilfreich?

Lösung

Seit der Einführung von CSS3 ist die beste Möglichkeit, mit CSS abgerundete Ecken hinzuzufügen, die Verwendung von border-radius Eigentum.Du kannst Lesen Sie die Spezifikation auf dem Grundstück, oder holen Sie sich welche nützliche Implementierungsinformationen zu MDN:

Wenn Sie einen Browser verwenden, der nicht implementieren border-radius (Chrome vor Version 4, Firefox vor Version 4, IE8, Opera vor Version 10.5, Safari vor Version 5). Die folgenden Links beschreiben eine ganze Reihe verschiedener Ansätze.Finden Sie eines, das zu Ihrer Website und Ihrem Codierungsstil passt, und entscheiden Sie sich dafür.

  1. CSS-Design:Erstellen Sie benutzerdefinierte Ecken und Grenzen
  2. CSS abgerundete Ecken „Roundup“
  3. 25 Techniken für abgerundete Ecken mit CSS

Andere Tipps

Ich habe mir das zu Beginn der Erstellung von Stack Overflow angesehen und konnte es nicht finden beliebig Methode, abgerundete Ecken zu erzeugen, die mir nicht das Gefühl gab, als wäre ich gerade durch einen Abwasserkanal gegangen.

CSS3 definiert endlich Die 

border-radius:

Das ist genau die Art und Weise, wie Sie möchten, dass es funktioniert.Das funktioniert zwar in den neuesten Versionen von Safari und Firefox einwandfrei, aber überhaupt nicht in IE7 (und ich glaube nicht in IE8) oder Opera.

Mittlerweile geht es 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.

Im Allgemeinen erhalte ich nur mit CSS abgerundete Ecken. Wenn der Browser dies nicht unterstützt, wird der Inhalt mit flachen Ecken angezeigt.Wenn abgerundete Ecken für Ihre Website nicht so wichtig sind, können Sie die folgenden Zeilen 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 sehen, haben Sie in jedem Satz browserspezifische Stile und in den vierten Zeilen deklarieren wir dies standardmäßig. Wir gehen davon aus, dass die anderen (hoffentlich auch der IE) sich in Zukunft für die Implementierung der Funktion entscheiden, damit unser Stil auch für sie bereit ist.

Wie in anderen Antworten erwähnt, funktioniert dies wunderbar 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:Verwendung der border-radius CSS3-Selektor.Ab sofort können Sie sich bewerben -moz-border-radius Und -webkit-border-radius für Mozilla- bzw. Webkit-basierte Browser.

Was passiert also mit dem Internet Explorer?Microsoft verfügt über viele Verhaltensweisen, um dem Internet Explorer einige zusätzliche Funktionen und mehr Fähigkeiten zu verleihen.

Hier:A .htc Verhaltensdatei abrufen round-corners aus border-radius Wert in Ihrem CSS.Zum Beispiel.

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

Natürlich ist der Verhaltensselektor kein gültiger Selektor, aber Sie können ihn mit bedingten Kommentaren in eine andere CSS-Datei einfügen (nur für IE).

Der Verhalten HTC-Datei

Da die Unterstützung von CSS3 in neueren Versionen von Firefox, Safari und Chrome implementiert wird, wird es auch hilfreich sein, einen Blick auf „Border Radius“ zu werfen.

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

Wie jede andere CSS-Kurzschrift kann auch die obige Datei im erweiterten Format geschrieben werden und so unterschiedliche Randradien für oben links, oben rechts usw. erreichen.

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

jQuery ist die Art und Weise, wie ich persönlich damit umgehen würde.CSS-Unterstützung ist minimal, Bilder sind zu umständlich, die Möglichkeit, in jQuery die Elemente auszuwählen, die runde Ecken haben sollen, macht für mich absolut Sinn, auch wenn einige zweifellos etwas anderes argumentieren werden.Hier gibt es 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 um reines Styling handelt, bin ich eher dagegen, Client-Skripte zu verwenden, um dies zu erreichen.

Die Methode, die ich bevorzuge (obwohl sie ihre Grenzen hat), besteht darin, vier Bilder mit abgerundeten Ecken zu verwenden, die Sie mithilfe von CSS in den vier 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 Kasten sollte schlicht sein, sonst passen die Ecken nicht zum Hintergrund), aber für alles andere funktioniert es sehr gut.

Aktualisiert: Die Implementierung wurde durch die Verwendung eines Sprite-Sheets verbessert.

Diese Lösung gefällt mir persönlich am besten, sie ist eine .htc-Datei, damit der IE geschwungene 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 anderen) können Sie dies in CSS tun, indem Sie das verwenden border-radius Eigentum.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 eine Menge kleiner hinzu divs, damit es abgerundet aussieht, oder sie verwenden Ränder und negative Ränder, um 1 Pixel große gekerbte Ecken zu erzeugen.Einige verwenden möglicherweise auch SVG im IE.

Meiner Meinung nach ist die CSS-Methode besser, da sie einfach ist und in Browsern, die sie nicht unterstützen, problemlos beeinträchtigt wird.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 erstellt habe.Bei der absoluten Positionierung im IE gibt es einen Rundungsfehler von 1 Pixel. Sie möchten also, dass der Container eine gerade Anzahl von Pixeln breit ist, aber das 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 alle vier Ecken sind zusammengepackt.Sieht aus wie ein Kreis.

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

Als Hinweis darauf, wie komplex es ist, abgerundete Ecken überhaupt zum Laufen zu bringen Yahoo rät ihnen davon ab (siehe erster Aufzählungspunkt)!Zugegeben, in diesem Artikel geht es nur um abgerundete 1-Pixel-Ecken, aber es ist interessant zu sehen, dass selbst ein Unternehmen mit seiner Fachkenntnis zu dem Schluss gekommen ist, dass sie einfach zu schmerzhaft sind um sie zum Laufen zu bringen meistens.

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

Klar, wenn es sich um eine feste Breite handelt, ist es mit CSS super einfach und überhaupt nicht anstößig oder mühsam.Wenn Sie eine Skalierung in beide Richtungen benötigen, wird es unruhig.Einige der Lösungen verfügen über eine erstaunliche Anzahl übereinander gestapelter Divs, um dies zu ermöglichen.

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

Ruzee-Grenzen ist die einzige Javascript-basierte Anti-Aliasing-Lösung mit abgerundeten 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 beide Das abgerundete Element UND das übergeordnete Element enthalten ein Hintergrundbild.Es macht auch Ränder, Schatten und Glühen.

Das neuere RUZEE.ShadedBorder ist eine weitere Option, es fehlt jedoch die Unterstützung zum Abrufen von Stilinformationen aus CSS.

Wenn Sie sich für die Border-Radius-Lösung entscheiden, gibt es diese tolle Website zum Generieren des CSS, damit es für Safari/Chrome/FF funktioniert.

Wie auch immer, ich denke, Ihr Design sollte nicht von abgerundeten Ecken abhängen, und wenn Sie sich Twitter ansehen, sagen sie den IE- und Opera-Benutzern nur F****.Abgerundete Ecken sind schön, und ich persönlich bin damit einverstanden, dies für die coolen Benutzer aufzubewahren, die den IE nicht verwenden :).

Nun 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 abgerundete Ecken im IE.

Es gibt keinen „besten“ Weg;Es gibt Möglichkeiten, die für Sie funktionieren, und solche, die nicht funktionieren.Trotzdem habe ich hier einen Artikel über die Erstellung einer CSS+Image-basierten, flüssigen Round-Eck-Technik gepostet:

Box mit runden Ecken mit CSS und Bildern – Teil 2

Ein Überblick über diesen Trick besteht darin, dass er verschachtelte DIVs sowie die Wiederholung und Positionierung von Hintergrundbildern verwendet.Für Layouts mit fester Breite (feste Breite, dehnbare Höhe) benötigen Sie drei DIVs und drei Bilder.Für ein Layout mit fließender Breite (dehnbare Breite und Höhe) benötigen Sie neun DIVs und neun Bilder.Manche mögen es für zu kompliziert halten, aber meiner Meinung nach ist es die sauberste Lösung überhaupt.Keine Hacks, kein JavaScript.

Ich habe vor einiger Zeit einen Blog-Artikel darüber geschrieben. Für weitere Informationen: siehe 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, das die anderen Dinge stört.Es ist dem, was Mono gepostet hat, sehr ähnlich, enthält aber 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 Text in der Nähe der Ecke nicht blockiert wird.Der äußere Teil darf nicht transparent sein, damit er den Rand des nicht abgerundeten Teils verdecken kann.

Sobald CSS3 mit border-radius weitgehend unterstützt wird, wird dies außerdem die offiziell beste Möglichkeit sein, abgerundete Ecken zu erstellen.

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

Opera unterstützt border-radius noch nicht (anscheinend wird es in der Veröffentlichung nach Version 10 verfügbar sein).In der Zwischenzeit können Sie Verwenden Sie CSS, um einen SVG-Hintergrund festzulegen und so einen ähnlichen Effekt zu erzielen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top