CSS: 그림자 추가

1855 단어 css

1. 이미지에 그림자 효과를 적용합니다.




img{
  filter: drop-shadow(offset-x offset-y blur color);
}


예시:filter: drop-shadow(1px 1px 1px black);



2.텍스트에 그림자를 추가합니다.




h1{
  text-shadow: offset-x offset-y blur color;
}


An example from www.w3schools.com:text-shadow: 5px 5px 10px red;


3. 요소에 하나 이상의 사각형 모양 그림자 추가




  box-shadow: offset-x offset-y blur color, 
              offset-x offset-y blur color, 
              offset-x offset-y blur color;
}


An example from www.w3schools.com:box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;

*박스섀도우와 드롭섀도우의 차이점



Breaking down CSS Box Shadow vs. Drop Shadow

좋은 웹페이지 즐겨찾기