Hvordan lage Avrundet Borders Bruke CSS

April 4

Så du ønsker en nettside med fine runde kanter, men du ønsker ikke å rote med å bygge bilder og opplasting til FTP-serveren, deretter gjenoppbygge disse bildene til å passe forskjellige størrelse tabeller og grafikk? Vel, da jeg har en løsning for deg. Web-design har utviklet seg langt nok gjennom CSS (Cascading Style Sheets) at vi nå kan sette runde grenser på våre nettsider uten å laste opp noen bilder. Du kan i stedet bruke en rekke CSS attributter og HTML-koder på websiden din. Hvis du ikke allerede vet om CSS, må du lese opp på den og opprette en CSS-stilark, en enkel tekstdokument med Css forlengelse som du legger på serveren din og link til fra HTML-siden, så leseren vet å bruke den.

Bruksanvisning

1 Etablere hvor de avrundede kanter vil gå i din webside.

2 Lag følgende koder i HTML-siden rundt dette området. De må plasseres i riktig rekkefølge. <Div class = "t"> <div class = "b"> <div class = "l"> <div class = "r"> <div class = "bl"> <div class = "br"> <div class = "tl"> <div class = "tr"> Din tekst info, eller grafisk her ... </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ div> Dette bygger hjørnene.

3 Åpne din CSS stilark og sette disse kodene inn i den: .bl {background: url (bl.gif) 0 100% no-repeat} .br {background: url (br.gif) 100% 100% no-repeat}. tl {background: url (tl.gif) 0 0 no-repeat} .tr {background: url (tr.gif) 100% 0 no-repeat; padding: 10px}. Resultatet er fire hjørner med runde buer rundt tekst eller bilde.

4 Utslette den typiske grensen som går rundt de avrundede hjørne bildene ved å lage en liten, hvit prikk, kalt dot.gif, som er samme størrelse som den grensen.

5 Legg til nye CSS-regler i stilarket som kaller opp denne grensen blocker (den dot.gif bildet) så det går rundt kantene av grensen, blotting ut de firkantede linjer rundt buet hjørner. Reglene er: .B {background: url (dot.gif) 0 100% repeat-x} .l {background: url (dot.gif) 0 0 repeat-y} .r {background: url (dot.gif) 100% 0 repeat-y}

6 Test grensene og foreta rettinger i koden din om nødvendig.

Hint

New CSS-kode blir tilgjengelig for å gjøre avrundede hjørner som er veldig stilig. Hold et øye med disse kodene. Du finner dem ved å følge linken i Resources.