CSS-kantsider

Indholdsfortegnelse

    Vis indholdsfortegnelse

CSS-kant - individuelle sider

Fra eksemplerne på de foregående sider har du set, at det er muligt at angive en forskellig kant til hver side.

I CSS er der også egenskaber til at specificere hver af grænserne (øverst, højre, nederst og venstre):

Eksempel

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

Resultat :

Different Border Styles

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

Eksemplet ovenfor giver samme resultat som dette:

Eksempel

p {	border-style: dotted solid;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

Så her er hvordan det virker:

Hvis egenskaben class="w3-codespan">border-style har fire værdier:

  • kant-stil: stiplet fast dobbelt stiplet;

    • øverste kant er prikket

    • højre kant er fast

    • nederste kant er dobbelt

    • venstre kant er stiplet

Hvis egenskaben class="w3-codespan">border-style har tre værdier:

  • border-style: stiplet solid double;

    • øverste kant er prikket

    • højre og venstre kant er fast

    • nederste kant er dobbelt

Hvis egenskaben class="w3-codespan">border-style har to værdier:

  • border-style: stiplet solid;

    • øverste og nederste kanter er prikket

    • højre og venstre kant er fast

Hvis egenskaben class="w3-codespan">border-style har én værdi:

  • kant-stil: prikket;

    • alle fire kanter er prikket

Eksempel

 /* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three 
  values */
p {
  border-style: dotted solid double; 
}
  
/* Two values */
p {
  border-style: dotted solid; 
}
/* One value */
p {
  border-style: dotted; 
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>

Egenskaben class="w3-codespan">border-style bruges i eksemplet ovenfor. Det fungerer dog også med class="w3-codespan">border-width og class="w3-codespan">kantfarve.