CSS Box Cień
CSS box-shadow Property
Właściwość CSS box-shadow
służy do zastosowania jednego lub więcej cieni do elementu.
Określ cień poziomy i pionowy
W najprostszym użyciu określasz tylko cień poziomy i pionowy. Domyślnym kolorem cienia jest bieżący kolor tekstu.
Przykład
Określ cień poziomy i pionowy:
div
{
box-shadow: 10px 10px;
}
Określ kolor cienia
Parametr color
określa kolor cienia.
Przykład
Określ kolor cienia:
div
{
box-shadow: 10px 10px grey;
}
Dodaj efekt rozmycia do cienia
Parametr blur
określa promień rozmycia. Im wyższa liczba, tym bardziej rozmyty będzie cień.
Przykład
Dodaj efekt rozmycia do cienia:
div
{
box-shadow: 10px 10px 5px grey;
}
Ustaw promień rozprzestrzeniania się cienia
Parametr spread
określa promień rozrzutu. Wartość dodatnia zwiększa rozmiar cienia, wartość ujemna zmniejsza rozmiar cienia.
Przykład
Ustaw promień rozproszenia cienia:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
Ustaw parametr wstawki
Parametr inset
zmienia cień z cienia zewnętrznego (początek) na cień wewnętrzny.
Przykład
Dodaj parametr wstawki:
div
{
box-shadow: 10px 10px 5px grey inset;
}
Dodaj wiele cieni
Element może mieć również wiele cieni:
Przykład
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Karty
Możesz również użyć box-shadow
właściwości do tworzenia kart przypominających papier:
1
1 stycznia 2021
Hardanger, Norwegia
Przykład
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |