For nylig skrev jeg en artikel om CSS3: Afrundede CSS Corners , hvilket er en fantastisk løsning til at skabe afrundede hjørner. Men Internet Explorer ikke understøtter det, men der er en løsning, som denne artikel forklarer.

De følgende to links demonstrere en fungerende version, og også en zip-fil, så du kan downloade alt hvad du behøver for at få dette arbejde.

• IE afrundede hjørner demo
• IE-afrundet-corners.zip

HTML er ret ligetil og bruger koden fra en anden artikel - HTML5 tutorial: Kom godt i gang .

For at få de afrundede hjørner, der arbejder i IE du har brug JQuery og JQuery hjørnet script som begge er inkluderet i ovenstående zip-fil, som jeg har derefter refereres fra HTML.

<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.corner.js"></script>

Herefter skal du simpelthen nødt til at fortælle browseren, hvor hjørner du ønsker at blive afrundet.

<script>
$("#container").corner();
$("section").corner();
$("aside").corner();
$("#main-navigation a").corner("top 5px");
</script>

Hvis du er fortrolig med CSS på alle, så skal du være i stand til nemt at se, hvordan dette anvendes ved hjælp af JavaScript, som vi simpelthen bruger det element, ID eller klasse inden for de citater at målrette en del af HTML.

Oversigt

Og det er alt der er til det. Du kan oprette alle former for afrundede hjørne effekter som vist på afrundede hjørner demo site . Indtil nu, har jeg altid lavet afrundede hjørner med denne metode , men at se den enkelhed af denne Jquery løsning, jeg er fristet til at skifte til Internet Explorer i mindst og stole på CSS3 til Webkit og Mozilla-browsere.

Hvad tror du? Er du stadig bruger billeder til afrundede hjørne løsninger, eller er JavaScript og CSS3 metoder blevet langt mere udbredt i udviklingen samfund?