5. CSS_그림자 효과 만들기

h1{
background : #ffcc33;
width : 400px;
/* 두개 적으면 위아래/ 4개 적으면 좌우위아래 */
padding : 10px 20px 30px 40px; 
text-shadow : 10px 20px 5px #000;
box-shadow : 20px -20px 15px blue;
}

 

• padding
  • 값 1개: 전부 동일
  • 값 2개: 위·아래 / 좌·우
  • 값 3개: 위 / 좌·우 / 아래
  • 값 4개: 위 / 오른쪽 / 아래 / 왼쪽 (시계 방향)
• text-shadow
  • 가로 오프셋 세로 오프셋 번짐 정도 색상
• box-shadow
  • 가로 오프셋 세로 오프셋 번짐 정도 색상
  • 세로값이 음수면 위쪽으로 그림자 생김