Aby dodać styl i design do tekstu i elementów, używany jest efekt cienia. Można go dodać do elementu za pomocą „Shadow Box„Własność CSS. Korzystając z przecinków, możesz ustawić wiele efektów jednocześnie, ja.mi., poziomy cień, pionowy cień, promieniowanie rozmycia itp. Ta właściwość zapewnia różne funkcje obrazu za pomocą elementów kolorów.
Niniejszy podręcznik dostarczy metodę związaną z ustawieniem „Shadow Box„Tylko na dole elementu.
Własność CSS Box-Shadow
CSS oferuje nieruchomość o nazwie „Shadow Box”To pozwala nam ustawić cień na dowolny element lub obraz. Ta właściwość ma następujące aspekty:
Składnia
Aby wyjaśnić te punkty, przejdźmy do składni Drop-Shadow:
Box-shadow: offset-x offset-y radyka radacza;
Aby lepiej zrozumieć, wdrożymy praktyczny przykład „Shadow Box" nieruchomość.
Przykład: jak ustawić boks tylko na dole w CSS?
Zastosujemy efekt cienia pudełka do obrazu. W tym pierwszym miejscu dodamy obraz w HTML, a następnie zastosujemy właściwość CSS „Shadow Box„Do tego:
To da następujące dane wyjściowe:
Poruszajmy się, aby dodać efekt cienia na dole obrazu:
img
Box-shadow: 0px 15px 5px Orange;
Powyższe wartości reprezentują następujące punkty:
Na tym obrazie możemy zobaczyć cień na dole.
Wniosek
Aby wyświetlić cień na dole obrazu, „Shadow Box„Własność jest używana. W tym celu Offset-X jest ustawiony jako „0”, Offset-y to dowolna wartość dodatnia, a kolor, który chcesz wyświetlić. Z pomocą przykładu w tym artykule wyjaśniono, jak wyświetlać cienie tylko na dole obrazu.