outline-style

Podsumowanie

W aplikacjach outline-style jest używane do ustawienia stylu konturu elementu. Kontur jest linią rysowaną wokół elementu, na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.

Składnia

auto | <br-style>
where 
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Wartości

style może być jedną z poniższych wartości:

none

Bez konturu (outline-width ma wartość 0).

dotted

Kontur jest serią kropek.

dashed

Kontur jest serią krótkich fragmentów linii.

solid

Kontur jest pojedynczą linią.

double

Kontur składa się z dwóch pojedynczych linii. Wartość outline-width jest sumą dwóch linii i przestrzeni między nimi.

groove

Kontur wygląda, jakby był wyrzeźbiony w obrazie.

ridge

Przeciwieństwo groove: kontur wygląda, jakby wychodził z obrazu.

inset

Kontur sprawia, że pudełko wygląda, jakby było osadzone w obrazie.

outset

Przeciwieństwo inset: kontur sprawia, że pudełko wygląda, jakby wychodziło z obrazu.

Powiązane własności

• outline ustawia kolor, styl i szerokość konturu.
• outline-color ustawia kolor konturu.
• outline-offset odsuwa kontur od elementu.
• -mo-outline-radius ustawia zaokrąglenie rogów konturu.
• -moz-outline-radius-bottomleft ustawia zaokrąglenie dolnego lewego rogu.
• -moz-outline-radius-bottomright ustawia zaokrąglenie dolnego prawego rogu.
• -moz-outline-radius-topleft ustawia zaokrąglenie górnego lewego rogu.
• -moz-outline-radius-topright ustawia zaokrąglenie górnego prawego rogu.
• outline-width ustawia szerokość konturu.

Przykłady

hbox.example {
  /* nadaje konturowi trójwymiarowy styl groove */
  -moz-outline-style: groove;
}