Vlastnosti obrysu CSS

Obsah

Obrys je čára nakreslená vně okraje prvku.

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

Zkuste to sami →

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

obrys CSS

Obrys je čára, která je nakreslena kolem prvků MIMO okraje, aby prvek „vynikl“.

CSS má následující vlastnosti obrysu:

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

Poznámka: Obrys se liší od ohraničení! Na rozdíl od ohraničení je obrys nakreslený mimo hranice prvku a může překrývat jiný obsah. Také obrys je NENÍ součástí rozměrů prvku; celkovou šířku a výšku prvku není ovlivněna šířkou obrysu.

Styl obrysu CSS

Vlastnost outline-style určuje styl obrysu, a může mít jednu z následujících hodnot:

dotted: - Definuje tečkovaný obrys
dashed: - Definuje čárkovaný obrys
solid: - Definuje pevný obrys
double: - Definuje dvojitý obrys
groove: - Definuje 3D drážkovaný obrys
ridge: - Definuje 3D rýhovaný obrys
inset: - Definuje 3D vložený obrys
outset: - Definuje 3D počáteční obrys
none: - Nedefinuje žádný obrys
hidden: - Definuje skrytý obrys

Následující příklad ukazuje různé hodnoty outline-style:

Příklad

Ukázka různých stylů obrysu:

 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;}

Výsledek :

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.

Zkuste to sami →

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

Poznámka: Žádná z ostatních vlastností obrysu (o kterých se dozvíte více v dalších kapitolách) nebude mít ŽÁDNÝ účinek, pokud Vlastnost class="w3-codespan">styl obrysu je nastavena!