CSS kant alla sidor

CSS ram - enskilda ramar

Från exempel från föregående kapitel har du sett att du kan specificera olika ramar för varje sida.

I CSS finns det några egenskaper som kan användas för att specificera varje ram (topp, höger, botten och vänster):

Exempel

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Resultat:

Olika ramstilar

Prova själv

Olika ramstilar

Resultatet från föregående exempel är detsamma som:

Exempel

p {
  border-style: punkt fast;
}

Prova själv

Dess arbetsprincip är så här:

Om border-style Egenskapsinställningar för fyra värden:

border-style: punkt fast dubbel prickad;

  • Övre rammen är en punktlinje
  • Höger rammen är en genomträngande linje
  • Nedre rammen är en dubbel linje
  • Vänster rammen är en punktlinje

Om border-style Egenskapsinställningar för tre värden:

border-style: punkt fast dubbel;

  • Övre rammen är en punktlinje
  • höger och vänster kant är fast
  • Nedre rammen är en dubbel linje

Om border-style Egenskapen anger två värden:

border-style: punkt fast;

  • övre och nedre kant är punktlinjer
  • höger och vänster kant är fast

Om border-style Egenskapen anger ett värde:

border-style: punkt;

  • Fyra kanter är punktlinjer

Exempel

/* Fyra värden */
p {
  border-style: punkt fast dubbel prickad; 
}
/* Tre värden */
p {
  border-style: punkt fast dubbel; 
}
/* Två värden */
p {
  border-style: punkt fast; 
}
/* En värde */
p {
  border-style: punkt; 
}

Prova själv

i föregående exempel användes border-style egenskap. Men border-width och border-color likaså tillämpligt.