14
Im Grunde bin ich versucht, herauszufinden, wie ich abgerundete Ecken auf einem DIV in CSS tun, die in Google ChromeWie kann ich abgerundete Ecken in CSS in Google Chrome tue
A
Antwort
28
Google Chrome (und Safari) arbeiten mit der machen werden folgende CSS 3 Präfixe
-webkit-border-radius: 10px;
für alle Ecken an 10px
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
für die obere linke Ecke und unten links bei 8px
für Firefox können Sie:
-moz-border-radius: 10px;
für alle Ecken und
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
für die obere linke Ecke und links unten
21
Um beide Chrome, FF und jeder Browser Abdeckung, die Träger CSS 3:
{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
+1
+1 für die Zukunftssicherheit mit 'Border-Radius' – peirix
4
Es ist Zukunft-nützlich, um Ihren c zu kodieren ss wie folgt aus:
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
diese Weise, wenn IE9/IE10 Code wird auch auch dort kommt aus arbeiten: D
1
Ja, aber das einzige Problem dabei ist, dass Sie tatsächlich zu werfen CSS Fehler, weil von IE wird aufgebockt und Microshaft will nichts dagegen tun, die Behebung, die ich benutze ist js basiert, aber ich kann mir vorstellen, dass die meisten Leute alles darüber wissen. Aber der Grund, warum ich es verwende, ist, dass es immer für mich und alle gängigen Browser funktioniert. Bitte schön.
var obj= document.getElementById('divName');
var browserName=navigator.appName;
var browserVer=parseInt(navigator.appVersion);
//alert(browserName);
if ((browserName=="Microsoft Internet Explorer")) {
obj.style.borderRadius = "15px";
}else {
obj.style.MozBorderRadius = "15px";
obj.style.WebkitBorderRadius= "15px";
}
3
Vorausgesetzt, dass alle Browser nun Border-Radius ohne Präfixe unterstützen; siehe: http://caniuse.com/#search=border-radius die korrekte Syntax heute zu verwenden ist einfach:
border-radius: 5px;
@Spasm Ich glaube, Sie haben es aber nur klar zu sein border-radius der CSS 3 Klasse. Das Webkit-Präfix ist speziell für Chrome und andere Webkit-Browser gedacht. – dove
@dove - da Spasm 'border-radius' ohne die Präfixe nicht erwähnt hat, wollen Sie nur darauf hinweisen, dass es eines Tages einen anderen Browser als Opera geben wird, der diese Stilregel ohne das Präfix unterstützt? – Anthony
@Anthony: Hoffentlich werden Webkit- und Mozilla-Browser eines Tages das Präfix löschen und einfach in den Standard konvertieren, so wie es sein soll. Und wenn du schon 'border-radius' drin hast, dann musst du nicht reingehen und deinen Code ändern ... – peirix