Wartość none jest domyślną wartością właściwości box-shadow.
Domyślnie element HTML nie posiada żadnego dodatkowego efektu cienia.
box-shadow:none;
ten element "div" nie posiada żadnego dodatkowego efektu cienia
<!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:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten element "div" nie posiada żadnego dodatkowego efektu cienia
</div>
</body>
</html>
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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ń interesującego nas elementu HTML powinien zostać utworzony wewnątrz obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.
box-shadow:8px 10px 2px -3px blue;
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"
<!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:#7DCDE8;
}
</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>
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 będzie posiadał kilka dodatkowych efektów cienia jednocześnie. Najbardziej na wierzchu będzie ten cień, który podamy jako pierwszy w naszym zapisie.
box-shadow:4px 4px 2px 1px black, 8px 8px 2px 1px red;
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: "4px 4px 2px 1px black, 8px 8px 2px 1px red"
<!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:4px 4px 2px 1px black, 8px 8px 2px 1px red;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</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: "4px 4px 2px 1px black, 8px 8px 2px 1px red"
</div>
</body>
</html>
