Autor publikacji
Virtual Patriot - Administrator

outline-color

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości outline-color

Za pomocą właściwości outline-color możemy określić kolor obrysu interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości outline-color

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

invert (lub currentColor dla tych przeglądarek internetowych, które nie interpretują wartości invert)

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości outline-color

Firefox

tak

Nie interpretuje wartości invert.

Google Chrome

tak

Nie interpretuje wartości invert.

Safari

tak

Nie interpretuje wartości invert.

Opera

tak

Nie interpretuje wartości invert.

Internet Explorer

tak

Edge

tak

Nie interpretuje wartości invert.

Opis wartości właściwości outline-color

invert

Wyjaśnienie

Wartość invert jest domyślną wartością właściwości outline-color.

Domyślnie kolor obrysu elementu HTML jest kolorem odwróconym od koloru tła, na jakim został wyświetlony wspomniany obrys.

Przykład

  outline-color:invert;
kolorem obrysu tego elementu "div" jest kolor odwrócony od koloru tła, na jakim został wyświetlony wspomniany obrys

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        outline-width:5px;
        outline-style:solid;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      kolorem obrysu tego elementu "div" jest kolor odwrócony od koloru tła, na jakim został wyświetlony wspomniany obrys
    </div>

  </body>
</html>

kolor

Wyjaśnienie

Za pomocą właściwości outline-color oraz dowolnego sposobu definiowania wartości koloru w języku CSS możemy określić kolor obrysu interesującego nas elementu HTML.

Przykład

  outline-color:red;
kolorem obrysu tego elementu "div" jest kolor czerwony, ponieważ do tego elementu "div" została dodana właściwość "outline-color" wraz z wartością "red"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        outline-width:5px;
        outline-style:solid;
        outline-color:red;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      kolorem obrysu tego elementu "div" jest kolor czerwony, ponieważ do tego elementu "div" została dodana właściwość "outline-color" wraz z wartością "red"
    </div>

  </body>
</html>