CSS Kantkanter

CSS kant - Enkel kant

Fra eksemplerne i det foregående kapitel har du set, at du kan specificere forskellige kanter for hver side.

I CSS er der også egenskaber, der kan bruges til at specificere hver kant (top, højre, bund og venstre):

Eksempel

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

Resultat:

Forskellige kantstile

prøv det selv

Forskellige kantstile

Resultatet af det foregående eksempel er det samme som dette:

Eksempel

p {
  border-style: dotted solid;
}

prøv det selv

Dets arbejdsmekanisme er sådan her:

hvis border-style Egenskabsindstilling fire værdier:

border-style: dotted solid double dashed;

  • Topkanten er gestrikket
  • Højrekanten er fast
  • Bundkanten er dobbeltstreg
  • Venstrekanten er gestrikket

hvis border-style Egenskabsindstilling tre værdier:

border-style: dotted solid double;

  • Topkanten er gestrikket
  • højre og venstre kant er en solid linje
  • Bundkanten er dobbeltstreg

hvis border-style egenskab indstiller to værdier:

border-style: dotted solid;

  • øvre og nedre kant er prikkede linjer
  • højre og venstre kant er en solid linje

hvis border-style egenskab indstiller en værdi:

border-style: dotted;

  • alle fire kanter er prikkede linjer

Eksempel

/* Fire værdier */
p {
  border-style: dotted solid double dashed; 
}
/* Tre værdier */
p {
  border-style: dotted solid double; 
}
/* To værdier */
p {
  border-style: dotted solid; 
}
/* En værdi */
p {
  border-style: dotted; 
}

prøv det selv

i ovenstående eksempel bruges border-style egenskab. Men border-width og border-color gælder også