W tym blogu omówimy metodę stosowania efektów cienia do elementów HTML.
Jak upuścić efekt cienia na elementach HTML za pomocą CSS?
„ pudełko-cień ” dodaje cień wokół elementu, w którym dwie lub więcej wartości dodanego efektu można oddzielić przecinkami.
Poniżej opisano składnię właściwości box-shadow.
Składnia
pudełko-cień : Żaden |h-offset v-offset rozmycie rozmycie kolor | wstawka | Inicjał | odziedziczasz ;
Opis powyższej składni znajduje się poniżej:
- “ Żaden ”: Jest to domyślna wartość właściwości box-shadow.
- “ przesunięcie h ”: Ta wartość reprezentuje odległość poziomą.
- “ przesunięcie v ”: Ta wartość określa odległość pionową.
- “ plama ”: Trzecia wartość to rozmycie. Maksymalizacja jego wartości zmaksymalizuje efekt rozmycia.
- “ rozpiętość ”: Czwarta wartość reprezentuje rozprzestrzenianie się cienia. Może zawierać wartości dodatnie lub ujemne, gdzie wartość dodatnia zwiększa spread, a wartość ujemna go zmniejsza.
- “ kolor ”: Ta wartość jest opcjonalna i reprezentuje bieżący kolor.
- “ Inicjał ”: Ta wartość ustawia właściwość swojej wartości początkowej.
- “ odziedziczasz ”: Ta wartość dziedziczy właściwość swojego elementu nadrzędnego.
- “ wstawka ”: Wartość wstawki jest używana do tworzenia cieni wewnątrz ramki.
Zobaczmy, jak wygląda efekt cienia na praktycznym przykładzie.
Przykład
W pliku HTML najpierw dodaj „
i
, aby zapewnić zawartość strony internetowej.
HTML
< dz >< h1 > Cień pudełka < / h1 >
< p > pudełko-cień: 3px 8px < / p >
< / dz >
Teraz zastosuj właściwości CSS do dodanych elementów HTML.
CSS
dz {pudełko-cień : 3 piks 8px ;
}
Element div jest stosowany z właściwością „ pudełko-cień ” o wartości „ 3px 8px ”, który reprezentuje przesunięcie w poziomie i przesunięcie w pionie.
Wynik
W następnej sekcji elementy HTML zostaną opatrzone różnymi właściwościami.
CSS
dz {granica : 5 piks solidny rgb ( 255 , 111 , 1 ) ;
pudełko-cień : 3 piks 8px 9px 4px #f4af1b ;
}
Poniżej przedstawiono dodatkowe właściwości CSS zastosowane do elementu div:
- “ granica ” ma przypisaną wartość 5px solid rgb(255, 111,1) gdzie 5px oznacza szerokość obramowania, solid reprezentuje styl obramowania, a rgb(255, 111, 1) to kolor.
- “ pudełko-cień ” o wartości 3px 8px 9px 4px #f4af1b reprezentuje przesunięcie h jako 3px, v-offset jako 8px, rozmycie jako 9px, rozłożenie jako 4px, a #f4af1b określa kolor.
Powyższy kod wyświetli element div, jak pokazano poniżej:
Teraz w następnej sekcji utwórz dwa pola reprezentujące dwa elementy div. Każdemu z nich nadamy różne wartości wielu cieni w ramce i będziemy obserwować wyniki.
HTML
>
>
Styl box1 div
#pudełko1 {szerokość : 40% ;
wzrost : 140 pikseli ;
granica : 5 piks solidny #ff9c83 ;
pudełko-cień : 8px 10 piks 15 piks 20px #807f7f ;
}
Tutaj:
- “ #pudełko1 ” służy do uzyskiwania dostępu do elementu div o identyfikatorze box1.
- “ szerokość ” służy do ustawienia szerokości elementu.
- “ wzrost ” określa wysokość elementu.
- “ granica ” otrzymuje wartość 5px solid #ff9c83, gdzie 5px wskazuje szerokość obramowania, solid reprezentuje styl obramowania, a #ff9c83 to kolor.
- “ pudełko-cień ” właściwość zostanie ustawiona jako „ 8px 10px 15px 20px #807f7f ” gdzie 8px to przesunięcie w poziomie, 10px to przesunięcie w pionie, 15px to efekt rozmycia, 20px to efekt rozproszenia, a #807f7f to kolor cienia.
Styl box2 div
#pudełko2 {szerokość : 40% ;
wzrost : 140 pikseli ;
granica : 5 piks solidny rgb ( 255 , 111 , 1 ) ;
pudełko-cień : wstawka 4px 8px #f4af1b ;
lewy margines : 350 pikseli ;
}
Można zauważyć, że stylizowaliśmy element div box2 na te same właściwości:
Dodatkowa wskazówka: Dodawanie wielu cieni do elementu HTML
„ pudełko-cień ” można wykorzystać do dodania wielu efektów cienia do elementu HTML. Można to zrobić za pomocą przecinków między każdym cieniem, jak pokazano w poniższym przykładzie:
pudełko-cień : 6 pikseli 6 pikseli rgb ( 91 , 0 , 143 ) , 12px 5 piks rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;Jak widać, pomyślnie zastosowano wiele cieni:
To wszystko dotyczyło użycia cienia obramowania CSS.
Wniosek
„ pudełko-cień ” w CSS służy do nakładania efektów cienia na elementy HTML. Ta właściwość składa się głównie z dwóch wartości, które dotyczą przesunięcia w poziomie i przesunięcia w pionie, ale może istnieć wiele wartości, takich jak efekt rozmycia, efekt promienia rozproszenia, kolor i inne. Co więcej, możesz także dodać wiele cieni do elementów, używając przecinków między każdą właściwością box-shadow. W tym artykule wyjaśniono właściwość box-shadow CSS z praktycznymi przykładami.