# 样式 · 样式

选择表面对光照的响应方式，保留其基础样式。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/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/zh/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/zh/docs/react/surface/#lighting-surface) 即可，无需额外声明 CSS 变量。

此效果以轴对齐的矩形为基础，近似模拟光照方向，并不模拟真实的点光源。在表面中心附近，高光强度会在与表面尺寸成比例的区域内逐渐减弱。

如需保留现有伪元素或包裹 input，请参阅[集成注意事项](https://edge.bolerish.com/zh/docs/integration/)。