box-shadow 박스 쉐도우 그림자

less than 1 minute read

기본적인 모양box-shadow: 2px 2px 5px #000;

</input>
</input></input>
</input>
</input>

문법 box-shadow: h-shadow v-shadow {blur {spread}} {color} {inset};

  • h-shadow : 수평 그림자 위치 (필수) (음수일 경우 위로)
  • v-shadow : 수직 그림자 위치 (필수) (음수일 경우 왼쪽으로)
  • blur : blur(흐리게)효과수준 (옵션)
  • spread : 그림자 크기 (옵션)
  • color : 그림자 색 (옵션)
  • inset; 내부 그림자 형식 (옵션)(inset 이라고 적음)

  • 특징
  • h-shadow, v-shadow 로 상하, 좌우 로 설정 가능
  • blur 및 spread (그림자 크기) 설정가능
  • spread (그림자 크기) 설정시 
  • 위치도 주의해서 설정
  • blur를 무조건 같이 표시해야한다.(0px라도)

  • 레이아웃으로의 위치를 차지하지 않는다.
  • 단순한 꾸밈으로 동작하며 box-shadow로 인한 레이아웃 뒤틀림이 없음.

  • 브라우저 지원
  • IE9+
  • Firefox
  • Chrome
  • Opera
  • Safari 5.1.1 (윈도우 최후 버전은 5.1.7 이므로 지원은 됨)

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp



🔗original-link

Updated: