# 스타일 · 스타일

기존 스타일을 유지하면서 서피스가 조명에 반응하는 방식을 선택하세요.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ko/docs/styles/

<a id="compare-styles"></a>

## 테두리 반응 비교하기

스타일을 선택하고 카드 주변에서 포인터를 움직여 보세요. 선택한 설정은 이 사이트의 카드, 코드 블록과 내비게이션 요소에도 적용됩니다.

테두리 스타일 비교

```tsx
const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>
```

<a id="options"></a>

## 스타일 값

| 값 | 동작 |
| --- | --- |
| `raised` | 조명을 향한 테두리에 하이라이트를 표시합니다. 기본값입니다. |
| `recessed` | 하이라이트를 장식 테두리 두께만큼 안쪽에 그립니다. 선택한 조명 방향은 유지합니다. |
| `matte` | 테두리 반응을 부드럽게 표현합니다. |

추가 옵션은 [API 레퍼런스](https://edge.bolerish.com/ko/docs/react/surface/#lighting-surface)를 참고하세요.

<a id="raised"></a>

## Raised

바깥으로 도드라지는 테두리를 표현하려면 `edgeStyle: 'raised'`를 사용하세요.

<a id="recessed"></a>

## Recessed

input 래퍼처럼 하이라이트를 장식 테두리 두께만큼 안쪽에 그리려면 `edgeStyle: 'recessed'`를 사용하세요. 선택한 조명 방향은 유지합니다.

<a id="matte"></a>

## Matte

더 부드럽고 은은한 테두리를 원하면 `edgeStyle: 'matte'`를 사용하세요.

<a id="customize-the-highlight"></a>

## 하이라이트 조정하기

서피스는 중첩 여부와 관계없이 자신의 글자색을 사용하며, 연결된 DOM 요소의 border-radius를 따릅니다. `color`로 하이라이트 색상을 바꾸고, `intensity`로 공유 조명의 강도를 조절할 수 있습니다. 반대쪽 테두리의 그림자를 없애려면 `shadowColor="transparent"`를 사용하세요. `borderWidth`는 하이라이트의 두께만 바꾸며 실제 테두리에는 영향을 주지 않습니다. 이 옵션들은 [Edge.Surface](https://edge.bolerish.com/ko/docs/react/surface/#lighting-surface)에 전달하면 됩니다. CSS 변수를 따로 선언할 필요는 없습니다.

이 효과는 좌표축에 정렬된 직사각형을 기준으로 조명 방향을 근사합니다. 물리적으로 정확한 점광원을 재현하지는 않습니다. 서피스 중심부에서는 크기에 비례한 영역에 걸쳐 하이라이트 강도가 줄어듭니다.

기존 가상 요소와 함께 사용하거나 input을 감싸는 경우에는 [적용 시 고려사항](https://edge.bolerish.com/ko/docs/integration/)을 참고하세요.