box-shadow 속성

CODEDRAGON Development/Web, WWW

반응형

  

box-shadow 속성

선택한 요소에 그림자 효과 추가하기

 

box-shadow : inset 5px -5px 10px 15px #000000;

 

구분

설명

inset

·       박스의 그림자가 안쪽으로 퍼지게 합니다

5px

·       가로 오프셋 거리 (가로로 밀리는 폭)

·       그림자가 가로로 얼마나 떨어져 있는지 지정

·       양수값은 요소의 오른 쪽에 그림자 표시

·       음수값은 요소의 왼쪽에 그림자 표시

-5px

·       세로 오프셋 거리 (세로로 밀리는 폭)

·       그림자가 세로로 얼마나 떨어져 있는지 지정.

·       양수값은 요소의 아래에 그림자 표시

·       음수값은 요소의 위쪽에 그림자 표시

10px

·       blur radius

·       그림자의 번지는 정도를 지정.

·       0이 최소값이며 이 값을 생략하면 번지는 효과를 사용하지 않습니다.

15px

·       그림자와 박스의 거리

#000000

·       그림자 색상을 지정

·       16진수로 된 색상값, 색상 이름이나 RGB 값 모두 사용가능

·       rgba(red, green, blue, 투명도)