Hvordan lage CSS3 avrundede hjørner i Internet Explorer

En av de mest estetisk tiltalende CSS3 velgere tilgjengelig er den som legger kurver til webside stedene. CSS3, den siste inkarnasjonen av CSS gjør at nettstedet utviklere å forvandle rektangulære hjørner på websider i elegante avrundede hjørner. Internet Explorer-versjoner større enn versjon 8 støtter nå denne nye CSS funksjonen. Legg det til alle nettsider på nettstedet ditt ved å legge til noen få linjer med CSS3 kode til HTML-dokumentet.

Bruksanvisning

1 Åpne et HTML-dokument og legge til koden nedenfor til dokumentets hoveddel:
<Div class = "avrundet">
</ Div>

Denne koden skaper en div som referanser klasse som heter "avrundet".

2 Finn dokumentet hode delen og lim inn følgende kode inn i den delen:
.rounded
{
border-radius: 6PX;
background-color: Gul;
height: 100px;
bredde; 100px
}

Denne koden skaper CSS-klasse referert av div. Dens verdi er seks piksler i dette eksemplet. En så liten verdi gir en subtil avrundet effekt som er knapt merkbar. De resterende tre attributter legge en bakgrunnsfarge til div og gjøre det 100 piksler høye og 100 piksler bredt. Disse egenskapene eksisterer for å tillate deg å se div når det vises på websiden. Fjern disse tre attributtene senere etter å ha testet koden.

3 Lagre dokumentet og vise det i noen versjon av Internet Explorer som er større enn 8. En gul div boks med avrundede hjørner vil vises på nettsiden.

Hint

• Øk border-radius verdi for å gjøre grensene rounder.