Ostatnio edytowany:

outline-color

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości outline-color

przeznaczenie

element HTML każdego typu

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

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

invert

Opis

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

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

Przykład

  outline-color:invert;
kolorem obrysu tego elementu "div" jest kolor odwrócony do 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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

kolor

Opis

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:#CBFFFF;
      }
    </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>