CSS-konturförskjutning


Innehållsförteckning

    Visa innehållsförteckning


CSS-konturförskjutning

Egenskapen outline-offset lägger till utrymme mellan en kontur och kanten/kanten på ett element. Utrymmet mellan en element och dess kontur är transparent.

Följande exempel anger en kontur 15px utanför gränskanten:

This paragraph has an outline 15px outside the border edge.

Exempel

 p {
  margin: 30px;
  border: 1px solid black;
  outline: 
  1px solid red;
  
  outline-offset: 15px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>


Följande exempel visar att mellanrummet mellan ett element och dess kontur är transparent:

This paragraph has an outline of 15px outside the border edge.

Exempel

 p {
  margin: 30px;
  background: 
  yellow;
  border: 1px solid black;
  outline: 
  1px solid red;
  
  outline-offset: 15px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline of 15px outside the border edge.</p>

</body>
</html>





Alla CSS Outline-egenskaper

outline

En förkortningsegenskap för att ställa in konturbredd, konturstil och konturfärg i en deklaration

outline-color

Ställer in färgen på en kontur

outline-offset

Anger utrymmet mellan en kontur och kanten eller kanten på ett element

outline-style

Ställer in stilen för en kontur

outline-width

Ställer in bredden på en kontur