CSS Box Shadow
- Poprzednia strona Cień CSS
- Następna strona Efekty tekstu CSS
Atrybut box-shadow CSS
CSS box-shadow Atrybut aplikuje cień na element.
Najprostsze użycie to wskazanie tylko poziomego i pionowego cienia:
żółty element <div> z czarnym box-shadow
Przykład
div {
box-shadow: 10px 10px;
}
Następnie, dodaj kolor do cienia:
żółty element <div> z siwym box-shadow
Przykład
div {
box-shadow: 10px 10px siwizna;
}
Następnie, dodaj efekt rozmycia do cienia:
żółty element <div>, z rozmytym box-shadow
Przykład
div {
box-shadow: 10px 10px 5px siwizna;
}
kartki
Możesz również użyć box-shadow Tworzenie efektu kartki z papieru:
1
1 stycznia 2021
Kawa
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;
}
Atrybuty cieni CSS
Poniższa tabela przedstawia atrybuty cieni CSS:
| Atrybut | Opis |
|---|---|
| box-shadow | Dodaj jeden lub więcej cieni do elementu. |
| text-shadow | Dodaj jeden lub więcej cieni do tekstu. |
- Poprzednia strona Cień CSS
- Następna strona Efekty tekstu CSS
