HTML to język używany do dostarczania struktury stron internetowych, a CSS pozwala nam zastosować style do elementów. Na stronie internetowej ustawiane są różne wartości właściwości, aby zastosować różne style, takie jak kolor tła, wielkości czcionki, granica, promieniowanie graniczne i shadow box.

Ten blog omówi metodę zastosowania efektów cienia do elementów HTML.

Jak upuścić efekt cienia na elementy HTML za pomocą CSS?

„„Shadow Box”Właściwość dodaje cień wokół elementu, w którym dwa lub więcej dodanych wartości efektów można oddzielić przecinkami.

Składnia właściwości pudełkowej jest opisana poniżej.

Składnia

Box-shadow: Brak | H-offset v-offset Rozmycie kolor | wstawka | Początkowy | dziedziczy;

Opis wyżej wymienionej składni jest wymieniony poniżej:

• "nic”: Jest to domyślna wartość właściwości Box-Shadow.
• "H-offset”: Ta wartość reprezentuje odległość poziomą.
• "v-offset”: Ta wartość określa odległość pionową.
• "plama”: Trzecia wartość to rozmycie. Maksymalizacja jej wartości zmaksymalizuje efekt rozmycia.
• "rozpowszechnianie się”: Czwarta wartość reprezentuje rozprzestrzenianie się cienia. Może pomieścić wartości dodatnie lub ujemne, gdzie wartość dodatnia zwiększa rozprzestrzenianie się, a wartość ujemna ją zmniejsza.
• "kolor”: Ta wartość jest opcjonalna, reprezentując bieżący kolor.
• "wstępny”: Ta wartość ustawia właściwość jej wartości początkowej.
• "dziedziczyć”: Ta wartość dziedziczy właściwość jego elementu nadrzędnego.
• "wstawka”: Wartość wstawka służy do robienia cieni w pudełku.

Zobaczmy, jak wygląda efekt cienia przez praktyczny przykład.

Przykład

W pliku HTML najpierw dodaj „". Wewnątrz tego elementu, dodaj

I

Tagi do dostarczania treści na stronie internetowej.

Html

Cień pudełka

Box-shadow: 3px 8px

Teraz zastosuj właściwości CSS do dodanych elementów HTML.

CSS

div
Box-shadow: 3px 8px;

Element DIV jest stosowany z właściwością „Shadow Box”Z wartością„3px 8px”, Który reprezentuje poziome przesunięcie i przesunięcie pionowe.

Wyjście

W następnej sekcji elementy HTML zostaną zaprojektowane z różnymi właściwościami.

CSS

div
granica: 5px stały RGB (255, 111, 1);
Box-shadow: 3px 8px 9px 4px #f4af1b;

Poniżej znajdują się dodatkowe właściwości CSS zastosowane do elementu DIV:

• "granica”Własność przypisuje się wartość 5px Solid RGB (255, 111,1), gdzie 5px wskazuje szerokość granicy, stałe reprezentuje styl granicy, a RGB (255, 111, 1) to kolor.
• "Shadow Box”Właściwość o wartości 3px 8px 9px 4px #f4AF1B reprezentuje przesunięcie H jako 3px, przesunięcie V jako 8px, Blur jako 9px, rozprzestrzenianie się jako 4px i #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. Damy każdemu z różnymi wieloma wartościami pudełkowymi i obserwujemy wyniki.

Html

Cień pudełka

Box-shadow: 3px 8px 9px 4px #f4af1b

Cień pudełka

Box-shadow: 3px 8px 9px 4px #f4af1b

Style Box1 div

#box1
Szerokość: 40%;
Wysokość: 140px;
Border: 5px Solid #FF9C83;
Box-shadow: 8px 10px 15px 20px #807f7f;

Tutaj:

• "#Box1”Służy do uzyskania dostępu do DIV z ID Box1.
• "szerokość„Własność jest wykorzystywana do ustawienia szerokości elementu.
• "wysokość„Właściwość ustawia wysokość elementu.
• "granica”Jest podana wartość 5px solid #ff9c83, gdzie 5px wskazuje szerokość granicy, stałe reprezentuje styl granicy, a #ff9c83 to kolor.
• "Shadow Box„Własność zostanie ustalona jako„8px 10px 15px 20px #807f7f”W przypadku przesunięcia 8px, 10px jest przesunięcie pionowe, 15px to efekt rozmycia, 20px to efekt rozprzestrzeniania się, a #807f7f to kolor cienia.

Style Box2 div

#box2
Szerokość: 40%;
Wysokość: 140px;
granica: 5px stały RGB (255, 111, 1);
Box-shadow: Endeet 4px 8px #f4af1b;
Margin-left: 350px;

Można zauważyć, że stylizowaliśmy Div Box2 z tymi samymi właściwościami:

Wskazówka bonusowa: dodanie wielu cieni do elementu HTML

„„Shadow Box„Własność 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:

Box-Shadow: 6px 6px RGB (91, 0, 143), 12px 5px RGB (201, 8, 8), 16px 16px 8px RGB (226, 213, 29);

Jak widać, z powodzeniem zastosowano wiele cieni:

Chodziło o wykorzystanie cienia granicznego CSS.

Wniosek

„„Shadow Box„Własność w CSS jest wykorzystywana do zastosowania efektów cienia do elementów HTML. Ta właściwość składa się głównie z dwóch wartości dla poziomego przesunięcia i przesunięć pionowych, ale może istnieć wiele wartości, takich jak efekt rozmycia, efekt promienia rozprzestrzeniania się, kolor i wiele innych. Ponadto możesz również dodać wiele cieni do elementów, używając przecinków między każdą właściwością pudełkową. W tym artykule wyjaśniono właściwość CSS Box-Shadow z praktycznymi przykładami.