웹페이지

CSS STEP 22 - Shadow

IT의 큰손 2023. 4. 18. 11:33
728x90

★ 그림자, Shadow

  • 1. text-shadow : x y blur color;
  • 2. box-shadow : x y blur color;
  • x : 가로축 위치 | y : 세로축 위치 | blur : 퍼짐정도
  • 사용 ex)
div:nth-child(1) {
    text-shadow: 2px 2px 2px #999;
}

실행 결과

 

■ HTML 코드

<body>

        <div class="item">빨강</div>
        <div class="item">노랑</div>
        <div class="item">파랑</div>
  
</body>

 

■ 다양한 사용 ex)

  • ex1) 
div:nth-child(2) {
    border : 1px solid black;
    width : 100px;
    height: 100px;
    margin: 20px;
    box-shadow: 5px 5px 2px gray;
}

div:nth-child(2):hover {
    box-shadow : 5px 5px 2px black;
}
  • 실행 결과

실행 결과

 

728x90
저작자표시 비영리 변경금지