CSS div gerundete Ecken

Ich versuche folgendes zu tun ...CSS div gerundete Ecken

Hier ist, was ich habe jetzt .. aber es ist nicht richtig rendern. Hat jemand eine Idee, wie ich das beheben würde?

CSS

/* Curved Corners */ 
    .bl { 
background: url(bl.gif) 0 100% no-repeat; 
/*background-color:#EFFBEF;*/ 
width: 700px; 
margin-left: auto ; 
margin-right: auto ;} 
    .br { 
background: url(br.gif) 100% 100% no-repeat; 
} 
    .tl { 
background: url(tl.gif) 0 0 no-repeat; 
} 
    .tr { 
background: url(tr.gif) 100% 0 no-repeat; 
} 
    .clear {font-size: 1px; height: 1px}

HTML

<div class="bl"><div class="br"><div class="tl"><div class="tr"> 

     <div id="header"> 

    </div> 

    <div id="footer"> 

    </div> 

     </div></div></div></div>

Quelle

2010-12-31 Skizit

Stattdessen schlage ich vor, Sie verwenden CSS3, die im Gegensatz zu anderen Methoden, nicht fremde HTML oder Javascript-Markup erfordern, die notorisch verursacht jedes abgerundetes Element beim Laden der Seite "blinken".

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
-khtml-border-radius: 10px; 
border-radius: 10px;

Dieser Generator ist auch hilfreich: http://borderradius.com/ und es ist eine andere bei http://css3generator.com

In den neuesten Versionen der meisten (wenn nicht alle) Browser border-radius: 10px; ganz gut, und innerhalb einer angemessenen Zeit arbeitet, der Browser spezifische Erklärungen werden veraltet sein.

Um Grenzradius Arbeit in IE6, 7 und 8, versuchen ms-border-radius js library zu machen, obwohl ich es nicht getestet haben (und jemand hat geantwortet, dass es nicht. Funktioniert), dass Meine persönliche Meinung ist, wenn jemand noch diese Verwendung ist Browsern muss das Internet im Alltag wie ein seltsamer und gruseliger Ort erscheinen, und so werden sie ihre abgerundeten Ecken nicht verpassen.

Beiseite: Die Methode, die Sie verwenden möchten, war besser geeignet, wenn CSS3 nicht so weit unterstützt wurde. Es wurde während einer seltsamen Zeit des Internets geschaffen, als die Popularität von IE6 zahllose Webentwickler dazu trieb, stark nicht-semantische kreative Lösungen für ansonsten einfache Probleme zu finden. Vielen Dank, Internet Explorer, dass Sie sich ein paar Jahre Zeit genommen haben und den Fortschritt von Webdesign und -entwicklung verlangsamt haben.

Quelle

2010-12-31 02:33:26 Sandwich

Ich war unter dem Eindruck IE8 unterstützt dies nicht. – Skizit

Dies ist richtig, aber das folgende löst dieses Problem gut (in IE6, 7 und 8!) Info: http://code.google.com/p/ms-border-radius/wiki/Usage und Quelle: http://code.google.com/p/ms-border-radius/source/checkout – Sandwich

msbr sieht fehlerhaft aus, es löst eine Ausnahme in IE8 aus, sobald das Skript geladen wurde.Es scheint trotzdem zu funktionieren, aber ich mag es nicht, Fehler in der Statusleiste zu sehen. –

Eine fantastische Zusammenfassung für alle gängigen Browser, Sie sagen, wie jede Ecke abzurunden oder alle Ecken:

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

Quelle

2010-12-31 02:34:10 Ben

Es gibt immer curvycorners auch, verwendet es nativen CSS für Geschwindigkeit, wenn der Browser unterstützt oder fällt auf Javascript zurück, wenn der Browser dies nicht tut.

Quelle

2010-12-31 02:37:19

Kann einfach mit jQuery abgerundeten Ecken rounded_corner

$(document).ready(function(){ 
    $("#b1").corner(); 
});

Sie müssen nicht über Cross-Browser Probleme mit jQuery Ansatz zur Sorge erfolgen.

Quelle

2010-12-31 03:39:40

Stattdessen nur diesen Code in die Klasse, wo Sie abgerundete Ecken haben wollen. Es wird definitiv funktionieren.

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

Quelle

2013-02-20 06:50:47 vikram

CSS div gerundete Ecken

Antwort

Verwandte Themen