Jak zrobić zaokrąglone rogi w CSS w Google Chrome

Question

Zasadniczo próbuję dowiedzieć się, jak zrobić zaokrąglone narożniki na div w CSS, które będą wykonywali w Google Chrome

Answer 1

Google Chrome (i Safari) współpracy ze następujące CSS 3 prefiksy

-webkit-border-radius: 10px; 

do wszystkich zakątków w 10px

-webkit-border-top-left-radius: 8px; 
-webkit-border-bottom-left-radius: 8px; 

w lewym górnym rogu i lewym dolnym rogu na 8PX

Dla Firefox można użyć:

-moz-border-radius: 10px; 

dla wszystkich rogach i

-moz-border-radius-topleft: 8px; 
-moz-border-radius-bottomleft: 8px; 

na lewym górnym rogu i dolny lewy

Answer 2

obejmować zarówno Chrome, FF i dowolnej przeglądarki, która wspiera CSS 3:

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

Answer 3

Przydaje się w przyszłości oznaczanie kodu ss tak:

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

ten sposób, gdy IE9/IE10 wychodzi kod będzie również pracować również tam: D

Answer 4

Tak, ale tylko problem z tym jest to, że są faktycznie rzucanie błędy css ponieważ IE jest podnoszona, a Microshaft nie chce nic z tym zrobić, poprawka, której używam, jest oparta na js, ale wyobrażam sobie, że większość ludzi wie wszystko na ten temat. Ale powodem, dla którego go używam, jest to, że zawsze działa dla mnie i dla wszystkich głównych przeglądarek. Proszę bardzo.

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

} 

Answer 5

Biorąc pod uwagę, że wszystkie przeglądarki obsługują teraz promień obramowania bez prefiksów; patrz: http://caniuse.com/#search=border-radius poprawna składnia do dzisiaj jest po prostu użyć:

border-radius: 5px;