본문 바로가기
HTML, CSS 내맘대로 정리/CSS

box-shadow

by yumino 2020. 3. 20.
반응형

box-shadow - 박스에 그림자 효과를 주는 속성 

none ,  h-shadow , v-shadow , blur , spread , color , inset

h-shadow : 그림자의 수직(X축) 거리

v-shadow :  그림자의 수직(Y축) 거리

blur : 그림자의 흐림정도

spread : 그림자의 거리

inset : 내부 그림자

 

box-shadow: 0px 0px #ccc;  -  h-shadow, v-shadow , color

box-shadow: 0px 0px 0px #ccc; -
h-shadow, v-shadow, blur, color

box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); - h-shadow, v-shadow, blur, spread, color

box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0) inset; - h-shadow, v-shadow, blur, spread, color, inset;

                

box-shadow: 0px 0px #ccc, 0px 0px red;  -  두가지 같이 사용(한개가 끝나면 쉼표사용)

반응형

댓글