Vlastnost ve stylu obrysu CSS
Příklad
Nastavte styl obrysu:
div {outline-style: dotted;}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Obrys je čára, která je nakreslena kolem prvků mimo okraje, aby prvek „vynikl“.
Vlastnost outline-style
určuje styl obrysu.
Výchozí hodnota: | žádný |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS2 |
Syntaxe JavaScriptu: | objekt .style.outlineStyle="přerušovaná" |
Tipy a poznámky
Poznámka: Obrysy se liší od ohraničení ! Na rozdíl od ohraničení je obrys nakreslen mimo ohraničení prvku a může překrývat jiný obsah. Také obrys NENÍ součástí rozměrů prvku; celková šířka a výška prvku není ovlivněna šířkou obrysu.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Syntaxe CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Hodnoty vlastností
Value | Description | Play it |
---|---|---|
none | Specifies no outline. This is default | |
hidden | Specifies a hidden outline | |
dotted | Specifies a dotted outline | |
dashed | Specifies a dashed outline | |
solid | Specifies a solid outline | |
double | Specifies a double outliner | |
groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Přerušovaný obrys:
div {outline-style: dashed;}
Příklad
Pevný obrys:
div {outline-style: solid;}
Příklad
Dvojitý obrys:
div {outline-style: double;}
Příklad
Obrys drážky:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
Příklad
Obrys hřebene:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
Příklad
Vložený obrys:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
Příklad
Úvodní přehled:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
Příklad
Nastavte styl obrysu pomocí různých hodnot:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
Související stránky
CSS tutoriál: CSS Outline
CSS reference: vlastnost obrysu
HTML DOM reference: vlastnost outlineStyle