Posun obrysu CSS

Obsah

    Zobrazit obsah

Posun obrysu CSS

Vlastnost outline-offset přidává prostor mezi obrysem a okrajem/okrajem prvku. Prostor mezi an prvek a jeho obrys je průhledný.

Následující příklad určuje obrys 15 pixelů mimo okraj ohraničení:

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

Příklad

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

Zkuste to sami →

<!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>

Následující příklad ukazuje, že prostor mezi prvkem a jeho obrysem je průhledný:

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

Příklad

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

Zkuste to sami →

<!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>

Všechny vlastnosti obrysu CSS

outline

Zkratková vlastnost pro nastavení šířky obrysu, stylu obrysu a barva obrysu v jedné deklaraci

outline-color

Nastaví barvu obrysu

outline-offset

Určuje mezeru mezi obrysem a okrajem nebo okrajem prvku

outline-style

Nastaví styl obrysu

outline-width

Nastavuje šířku obrysu