Ostatnio edytowany:

box-shadow

Autor: Virtual Patriot

Opis właściwości box-shadow

Za pomocą właściwości box-shadow możemy określić dodatkowy efekt cienia dla interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości box-shadow

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości box-shadow

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości box-shadow

none

Opis

Wartość none jest domyślną wartością właściwości box-shadow.

Domyślnie element HTML nie posiada żadnego dodatkowego efektu cienia.

Przykład

ten element "div" nie posiada żadnego dodatkowego efektu cienia

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 {
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" nie posiada żadnego dodatkowego efektu cienia
    </div>

  </body>
</html>

wzorzec wartości

Opis

Za pomocą właściwości box-shadow oraz z góry zdefiniowanego wzorca wartości możemy określić dodatkowy efekt cienia dla interesującego nas elementu HTML.

Składniki wzorca wartości właściwości box-shadow

Przykładowe zapisy

5px 10px

5px 10px 2px

5px 10px 2px 3px

5px 10px -2px 3px red

5px 10px 2px 3px red inset

-10px -5px black inset

-5px 10px 2px blue

x

Składnik x jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik x określa przesunięcie w poziomie cienia interesującego nas elementu HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie przesuwają cień w prawo względem rozmiaru elementu HTML

Wartości ujemne

wartości ujemne przesuwają cień w lewo względem rozmiaru elementu HTML

Wartość domyślna

0

y

Składnik y jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik y określa przesunięcie w pionie cienia interesującego nas elementu HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie przesuwają cień w dół względem rozmiaru elementu HTML

Wartości ujemne

wartości ujemne przesuwają cień w górę względem rozmiaru elementu HTML

Wartość domyślna

0

blur

Składnik blur nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik blur określa stopień rozmycia cienia interesującego nas elementu HTML. Im większa wartość składnika blur tym stopień rozmycia cienia będzie większy.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

0

spread

Składnik spread nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik spread określa rozmiar rozpiętości cienia interesującego nas elementu HTML.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie zwiększają rozmiar rozpiętości cienia elementu HTML

Wartości ujemne

wartości ujemne zmniejszają rozmiar rozpiętości cienia elementu HTML

Wartość domyślna

0

color

Składnik color nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik color określa kolor cienia interesującego nas elementu HTML.

Dostępne wartości

wybrany sposób definiowania wartości koloru w języku CSS

Wartość domyślna

currentColor

inset

Składnik inset nie jest wymaganym składnikiem wzorca wartości właściwości box-shadow. Składnik inset określa czy cień elementu HTML powinien zostać utworzony wewnątrz obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.

Dostępne wartości

słowo kluczowe inset

Sposób podawania

należy podać słowo kluczowe inset, jeżeli chcemy, aby cień elementu HTML został utworzony wewnątrz obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML

Wartość domyślna

brak

Przykład

ten element "div" posiada efekt cienia (przesunięty w prawo o 8 pikseli, przesunięty w dół o 10 pikseli, posiadający stopień rozmycia równy 2 piksele, posiadający zmniejszony o 3 piksele rozmiar rozpiętości oraz posiadający kolor niebieski), ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującymi wartościami: "8px 10px 2px -3px blue"

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 {
        box-shadow:8px 10px 2px -3px blue;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" posiada efekt cienia (przesunięty w prawo o 8 pikseli, przesunięty w dół o 10 pikseli, posiadający stopień rozmycia równy 2 piksele, posiadający zmniejszony o 3 piksele rozmiar rozpiętości oraz posiadający kolor niebieski), ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującymi wartościami: "8px 10px 2px -3px blue"
    </div>

  </body>
</html>

sekwencja wartości

Opis

Za pomocą sekwencji kilku (oddzielonych od siebie znakiem przecinka) wzorców wartości właściwości box-shadow możemy sprawić, że interesujący nas element HTML może posiadać kilka dodatkowych efektów cienia jednocześnie. Najbardziej na wierzchu będzie ten cień, który podamy jako pierwszy w naszym zapisie.

Przykład

ten element "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującą sekwencją wartości: "0 0 4px 2px red inset, 5px 5px 3px black"

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 {
        box-shadow:0 0 4px 2px red inset, 5px 5px 3px black;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "box-shadow" wraz z następującą sekwencją wartości: "0 0 4px 2px red inset, 5px 5px 3px black"
    </div>

  </body>
</html>