样式

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

比较边缘响应

选择样式，并在卡片周围移动指针。所选设置也会应用到本站的卡片、代码块和导航元素。

样式

Raised

高亮朝向光照的边缘。默认值。

组件保留原有颜色和布局。

比较边缘样式

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

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

启用 JavaScript 后即可操作示例。

比较边缘样式

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

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

样式值

样式值
值	行为
`raised`	高亮朝向光照的边缘。默认值。
`recessed`	将高光向内偏移一个装饰边框的宽度。保持所选的光照方向。
`matte`	柔化边缘的响应。

更多选项请参阅API 参考。

Raised

使用 edgeStyle: 'raised' 可呈现向外凸起的边缘。

Recessed

对于 input 包装元素等场景，可使用 edgeStyle: 'recessed' 将高光向内偏移一个装饰边框的宽度。所选的光照方向保持不变。

Matte

使用 edgeStyle: 'matte' 可让边缘更柔和、低调。

自定义高光

每个表面都使用自己的文字颜色，即使嵌套也不例外，并遵循所连接 DOM 元素的 border-radius。color 可覆盖高光颜色，intensity 用于调整共享光照的强度系数。shadowColor="transparent" 可移除相对边缘的阴影。borderWidth 仅改变高光厚度，不影响实际边框。将这些选项传给 Edge.Surface 即可，无需额外声明 CSS 变量。

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

如需保留现有伪元素或包裹 input，请参阅集成注意事项。