Hvordan lage en kant rundt et bilde i CSS3 - dummies

En av de vanligste endringene du kan lage til et bilde i CSS3, er å legge til en ramme. Dette setter avbildet fra det andre innholdet på siden. Selvfølgelig tilbyr CSS3 et bredt spekter av grenseformer. Trikset er å få grensen til å vise rundt bildet på en slik måte at du kan utføre andre oppgaver med den grensen senere.

Det er her HTML-koden kommer inn i spill. Den gir en beholder som kan holde alle slags ting (som den brukes som en beholder for

-taggen vist i forrige eksempel) - og du kan samhandle med denne beholderen på ulike måter. Følgende fremgangsmåte hjelper deg å legge til en kant rundt bildet.

1. Lag en ny CSS-fil med teksteditoren din.

   Redaktøren din støtter kanskje ikke CSS-filer. Enhver tekstfil vil gjøre.

2. Skriv inn følgende CSS-stilinformasjon.

   #ImageContainer {border-style: groove; kantbredde: tykk; border-farge: grå; polstring: 5px; flyte: venstre;}
   

   Flertallet av denne stilinformasjonen handler om grensen. Hvis du legger til polstring på grensen, blir det mer som en ramme. Float-verdien holder bildet rundt, i stedet for at den følger høyre side av nettleseren, når en bruker endrer størrelsen på nettleservinduet.

   Hvis du vil ha bildet på høyre side av siden, i stedet for den venstre, erstattes float: høyre;. Hele containeren, bildet inkludert, vil ligge på høyre side av siden, i stedet for til venstre. Når brukeren endrer nettleservinduet, vil bildet forbli i samme størrelse, men det vil bevege seg med høyre side av nettleservinduet.

3. Lagre filen som SimpleGraphics. CSS.

4. Legg til følgende kode i området til HTML-filen.

   Denne koden oppretter linken mellom HTML-filen og CSS-filen.

5. Lagre HTML-filen og last siden på nytt.

   Du ser grensen.