Vlastnost obrysové barvy CSS
Příklad
Nastavte barvu obrysu:
div {outline-color: coral;}
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-colorurčuje barvu obrysu.
Poznámka: Vlastnost stylu obrysu vždy deklarujte před
outline-colorvlastností. Prvek musí mít obrys, než změníte jeho barvu.
| Výchozí hodnota: | invertovat, pokud je podporováno, jinak currentcolor |
|---|---|
| Zděděno: | Ne |
| Animovatelné: | ano, viz jednotlivé vlastnosti . Přečtěte si o tématu Animable |
| Verze: | CSS2 |
| Syntaxe JavaScriptu: | objekt .style.outlineColor="#FF0000" |
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-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Poznámka: Tato hodnota invertnení podporována v žádném prohlížeči, kromě Internet Exploreru 8.
Syntaxe CSS
outline-color: invert|color|initial|inherit;
Hodnoty vlastností
| Value | Description | Play it |
|---|---|---|
| invert | Performs a color inversion. This ensures that the outline is visible, regardless of color background. Note: Browsers are not required to support this value. | |
| color | Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. | |
| 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
Nastavte barvu obrysu pomocí HEX hodnoty:
div {outline-color: #92a8d1;}
Příklad
Nastavte barvu obrysu s hodnotou RGB:
div {outline-color: rgb(201, 76, 76);}
Příklad
Nastavte barvu obrysu s hodnotou RGBA:
div {outline-color: rgba(201, 76, 76, 0.3);}
Příklad
Nastavte barvu obrysu pomocí hodnoty HSL:
div {outline-color: hsl(89, 43%, 51%);}
Příklad
Nastavte barvu obrysu pomocí hodnoty HSLA:
div {outline-color: hsla(89, 43%, 51%, 0.3);}
Související stránky
CSS tutoriál: CSS Outline
CSS reference: vlastnost obrysu
HTML DOM reference: vlastnost outlineColor