효과
효과 (Effects)
박스 그림자, 투명도 등을 스타일링하는 JSX 스타일 prop을 알려드려요. 요소에 시각적 효과를 손쉽게 더할 수 있어요.
출처: 문서
본문
Box Shadow
shadow 또는 boxShadow prop을 사용해서 요소에 박스 그림자를 적용하세요.
// hardcoded values
<Box shadow="12px 12px 2px 1px rgba(0, 0, 255, .2)" />
// token values
<Box shadow="lg" />
| Prop | CSS Property | Token Category |
|---|---|---|
shadows, boxShadow |
box-shadow |
shadows |
shadowColor |
--shadow-color |
colors |
Box Shadow Color
shadowColor prop을 사용해서 박스 그림자의 색상을 설정하세요. 이 prop은 --shadow-color CSS 변수에 매핑돼요.
<Box shadow="60px -16px var(--shadow-color)" shadowColor="red" />
| Prop | CSS Property | Token Category |
|---|---|---|
shadowColor |
--shadow-color |
colors |
Opacity
opacity prop을 사용해서 요소의 투명도를 설정하세요.
<Box opacity="0.5" />
| Prop | CSS Property | Token Category |
|---|---|---|
opacity |
opacity |
opacity |
Mix Blend Mode
mixBlendMode prop을 사용해서 요소의 콘텐츠가 배경과 어떻게 블렌딩될지를 제어하세요.
<Box bg="red.400">
<Image src="..." mixBlendMode="hard-light" />
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
mixBlendMode |
mix-blend-mode |
- |