CSS vázlat eltolás

Tartalomjegyzék

CSS vázlat eltolás

Az outline-offset tulajdonság szóközt ad egy körvonal és egy elem éle/szegélye között. A térköz an elem és körvonala átlátszó.

A következő példa egy 15 képpontos körvonalat határoz meg a szegély szélén kívül:

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

Példa

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

Próbálja ki Ön is →

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

A következő példa azt mutatja, hogy az elem és a körvonal közötti térköz átlátszó:

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

Példa

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

Próbálja ki Ön is →

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

Minden CSS Outline tulajdonság

outline: Gyorsírási tulajdonság a körvonalszélesség, a körvonal stílus és a beállításához körvonal-szín egy nyilatkozatban
outline-color: Beállítja a körvonal színét
outline-offset: Meghatározza a körvonal és az elem széle vagy szegélye közötti teret
outline-style: Beállítja a körvonal stílusát
outline-width: Beállítja a körvonal szélességét