상자 그림자 CSS

안녕하세요 여러분 오늘 저는 CSS의 Box Shadow에 대해 논의할 것입니다.

시작하자...

상자 그림자 요소 그림자를 디자인하는 데 도움이 될 수 있으며 매력적이고 눈길을 끌 수 있습니다.

구문 -




box-shadow: h-offset v-offset blur spread color;


  • h-offset은 수평 오프셋은 x축의 오프셋 카운트를 의미합니다.
  • v-offset은 수직 오프셋으로 y축의 오프셋 카운트를 의미합니다.
  • 파란색은 그림자의 흐림 효과 양입니다.
  • 확산은 그림자가 길이와 폭으로 얼마나 퍼질 것인지를 나타냅니다.
  • 색상은 그림자의 색상을 나타냅니다.

  • 예제 1 - 일반 상자 그림자 효과





    예제 2 - 애니메이션에서 사용




  • 이와 같이 다양한 방법으로 상자 그림자를 사용할 수 있습니다.
  • box-shadow에 대한 코드를 작성하지 않으려면 상자 그림자 생성기를 사용할 수 있습니다. 링크는 아래에 있습니다.
    https://shadows.brumm.af/
  • 여기에서 슬라이더를 사용하여 요구 사항에 따라 값을 변경하고 상자 그림자를 만들 수 있습니다.

  • 이 게시물을 확인해 주셔서 감사합니다.

    저에게 연락하실 수 있습니다 -
    인스 타 그램 -
    링크드인 -
    이메일 - [email protected]

    ^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
    ☕ --> https://www.buymeacoffee.com/waaduheck <--

    이 게시물도 확인하십시오.

    좋은 웹페이지 즐겨찾기