logo image
메인
기술
HOME
기술

box-shadow 박스 쉐도우 그림자

1
목록
#css #box-shadow #그림자
기본적인 모양
box-shadow: 2px 2px 5px #000;






문법
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
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1
tag