CSS-vázlat tulajdonságai

Tartalomjegyzék

A körvonal az elem határán kívülre húzott vonal.

This element has a black border and a green outline with a width of 10px.

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

CSS Outline

A körvonal egy vonal, amelyet az elemek köré húznak, a szegélyeken KÍVÜL, hogy az elem „kiemelkedjen”.

A CSS a következő vázlattulajdonságokkal rendelkezik:

outline-style
outline-color
outline-width
outline-offset
outline

Megjegyzés: A körvonal eltér a szegélyektől! A szegéllyel ellentétben a körvonal az az elem határán kívülre kerül, és átfedhet más tartalmat. Ezenkívül a vázlat az NEM része az elem méreteinek; az elem teljes szélessége és magassága nem befolyásolja a körvonal szélessége.

CSS vázlatstílus

Az outline-style tulajdonság határozza meg a körvonal stílusát, és a következő értékek egyike lehet:

dotted: - Pontozott körvonalat határoz meg
dashed: - Szaggatott körvonalat határoz meg
solid: - Szilárd körvonalat határoz meg
double: - Kettős körvonalat határoz meg
groove: - 3D barázdált körvonalat határoz meg
ridge: - 3D bordázott körvonalat határoz meg
inset: - Meghatároz egy 3D-s beillesztett körvonalat
outset: - 3D-s kiindulási körvonalat határoz meg
none: - Nem határoz meg körvonalat
hidden: - Rejtett körvonalat határoz meg

A következő példa a különböző outline-style értékeket mutatja be:

Példa

A különböző vázlatstílusok bemutatása:

 p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Eredmény:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

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

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

Megjegyzés: A többi vázlattulajdonságnak (amelyekről a következő fejezetekben többet megtudhat) SEMMILYEN hatása nem lesz, hacsak a Az class="w3-codespan">outline-style tulajdonság be van állítva!