Właściwości CSS Outline
Zarys to linia przebiegająca wokół elementu - poza granicę. Można to wykorzystać, aby element "stand out" .
CSS outline właściwości określić styl, kolor i szerokość zarysu.
Ten element ma cienką czarną ramkę i podwójne kontury, które jest 10px szerokości i zielony.
CSS Outline
outline jest linia, która jest zasysane wokół elementów (poza granicami), aby element "stand out" .
Jednak outline nieruchomości różni się od granicy nieruchomości - w outline NIE jest częścią wymiarów elementu jest; Łączna wysokość i szerokość elementu nie wpływa na szerokość konturu.
Outline Style
outline-style właściwość określa styl konturu.
outline-style właściwość może mieć jedną z następujących wartości:
-
dotted- Definiuje linią przerywaną -
dashed- Definiuje przerywaną zarys -
solid- Definiuje stałą zarys -
double- Definiuje podwójne kontury -
groove- Definiuje 3D rowkowane kontur. Efekt zależy od wartości Zarys kolorów -
ridge- Definiuje 3D prążkowane kontur. Efekt zależy od wartości Zarys kolorów -
inset- Definiuje kontur 3D wstawka. Efekt zależy od wartości Zarys kolorów -
outset- Definiuje 3D początku kontur. Efekt zależy od wartości Zarys kolorów -
none- definiuje żadnego zarysu -
hidden- Definiuje ukryte kontury
Poniższy przykład ustawia najpierw cienką czarną ramkę wokół każdej <p> elementu, to pokazuje różne outline-style wartości:
Przykład
p {
border: 1px solid black;
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;}Wynik:
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.
Spróbuj sam "  | Uwaga: Żaden z pozostałych właściwości CSS zarys opisanych poniżej będzie miała żadnego wpływu, chyba że outline-style właściwość jest ustawiona! |
|---|
Outline Kolor
outline-color właściwość jest używana, aby ustawić kolor obramowania.
Kolor może być ustawiona przez:
- Nazwa - określa nazwę koloru, podobnie jak "red"
- RGB - określić wartość RGB, jak "rgb(255,0,0)"
- Hex - określić wartość hex, jak "#ff0000"
- inwertowany - wykonuje inwersję koloru (który zapewnia, że kontur jest widoczny, niezależnie od koloru tła)
Przykład
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Wynik:
A colored outline.
Szerokość Outline
outline-width właściwość określa szerokość konturu.
Szerokość może być ustawiona jako określonej wielkości (w px, pt, cm, em , etc) lub przy użyciu jednego z trzech predefiniowanych wartości z: cienkie, średnie lub grube.
Przykład
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Wynik:
A thick outline.
A thinner outline.
Outline - Skrócona forma
Aby skrócić ten kod, możliwe jest również, aby określić wszystkie indywidualne właściwości konturu w jednym obiekcie.
outline nieruchomość jest skróconą własnością dla następujących poszczególnych właściwości konturu:
-
outline-width -
outline-style(wymagane) -
outline-color
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 »
Wszystkie właściwości CSS Outline
| Nieruchomość | Opis |
|---|---|
| outline | Ustawia wszystkie właściwości konturu w jednej deklaracji |
| outline-color | Ustawia kolor zarysu |
| outline-offset | Określa odstęp między konturem a krawędzią lub obramowanie elementu |
| outline-style | Ustawia styl konturu |
| outline-width | Ustawia szerokość zarysu |