Jak ustawić cień tylko na dole w CSS?

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:

• • Offset-X: Służy do dodawania poziomego cienia.
  • Offset-y: Służy do dodawania pionowego cienia.
  • kolor: Służy do ustawienia koloru cienia.

Składnia

Aby wyjaśnić te punkty, przejdźmy do składni Drop-Shadow:

Box-shadow: offset-x offset-y radyka radacza;

• • offset-x i offset-y będą pozytywne lub ujemne.
  • W poziomie, do dodania efektu po prawej stronie stosuje się wartość dodatnią.
  • W pionie wartość dodatnia jest dla dolnej strony, a ujemność jest dla góry.
  • Blur-Radius sprawia, że ​​cień jest jaśniejszy lub jaśniejszy.
  • W miejscu koloru przypiszesz każdy kolor, który chcesz podać obrazowi.

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:

• • Offset-X to „0px”Ponieważ nie chcemy wyświetlać cienia poziomo.
  • Offset-y to „15px„Aby ustawić szerokość cienia. Musi być pozytywny, ponieważ wyświetla cień na dole obrazu.
  • Blur-Radius to „5px". Sprawia, że ​​cień jest lżejszy.
  • Kolor cienia to „Pomarańczowy".

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.