BoxShadowValue 객체 타입

BoxShadowValue 객체는 boxShadow 스타일 속성에 사용된다. 이 객체는 2-4개의 길이 값, 선택적인 색상, 그리고 선택적인 inset 불리언 값으로 구성된다. 이 값들은 함께 박스 그림자의 색상, 위치, 크기, 흐림 정도를 정의한다.

예제

js

{
  offsetX: 10,
  offsetY: -3,
  blurRadius: '15px',
  spreadDistance: '10px',
  color: 'red',
  inset: true,
}

키와 값

offsetX

x축 방향의 오프셋을 나타낸다. 양수와 음수 모두 가능하다. 양수는 오른쪽, 음수는 왼쪽을 의미한다.

타입	선택 여부
number | string	필수

offsetY

y축 방향으로의 오프셋이다. 양수와 음수 모두 가능하다. 양수 값은 위쪽 방향을 나타내고, 음수 값은 아래쪽 방향을 나타낸다.

타입	선택 여부
number | string	필수

blurRadius

가우시안 블러 알고리즘에서 사용하는 반지름을 나타낸다. 값이 클수록 그림자가 더 흐려진다. 음수가 아닌 값만 유효하다. 기본값은 0이다.

타입	선택적
number | string	예

spreadDistance

그림자가 얼마나 커지거나 작아지는지를 결정한다. 양수 값을 지정하면 그림자가 확장되고, 음수 값을 지정하면 그림자가 축소된다.

타입	선택 여부
숫자 | 문자열	예

color

그림자의 색상을 지정한다. 기본값은 black이다.

타입	선택 여부
color	예

inset

이 옵션은 그림자가 요소 안쪽으로 들어가는지 여부를 결정한다. inset을 사용하면 그림자가 요소의 테두리 박스 외부가 아닌 내부에 나타난다.

타입	선택 여부
boolean	예

사용처

• boxShadow