Nylig skrev jeg en artikkel om CSS3: Avrundede CSS Corners , som er en flott løsning for å lage avrundede hjørner. Men ikke Internet Explorer støtter ennå, men det er en løsning som denne artikkelen forklarer.

Følgende to linker demonstrere en fungerende versjon og også en zip-fil slik at du kan laste ned alt du trenger for å få dette arbeidet.

• IE avrundede hjørner demo
• dvs. avrundet-corners.zip

HTML er ganske rett frem og bruker koden fra en annen artikkel - HTML5 tutorial: Komme i gang .

For å få avrundede hjørner som arbeider i IE trenger du jQuery og jQuery hjørnet script som begge er inkludert i ovennevnte zip filen som jeg har så refererte fra HTML.

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

Neste du bare trenger å fortelle nettleseren hvilken hjørnene du ønsker å bli avrundet.

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

Hvis du er kjent med CSS i det hele tatt bør du enkelt kunne se hvordan denne påføres ved hjelp av JavaScript, som vi bare bruker element, ID eller klasse innenfor anførselstegn for å målrette den delen av HTML.

Oppsummering

Og det er alt som skal til. Du kan lage alle slags avrundet hjørne effekter som vist på avrundede hjørner demoen . Frem til nå har jeg alltid laget avrundede hjørner ved hjelp av denne metoden , men å se det enkle dette Jquery løsning, jeg er fristet til å bytte for Internet Explorer minst og stole på CSS3 for Webkit og Mozilla nettlesere.

Hva tror du? Er du fremdeles bruker bilder for avrundet hjørne løsninger eller er det JavaScript og CSS3 metoder blitt mye mer bred spredning i utviklingen samfunnet?