# Estilos · Estilo

Elige cómo responde una superficie a la luz sin cambiar sus estilos base.

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

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

## Comparar la respuesta del borde

Elige un estilo y mueve el puntero alrededor de la tarjeta. La configuración elegida también se aplica a las tarjetas, los bloques de código y los elementos de navegación del sitio.

Comparar estilos de borde

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

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

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

## Valores de estilo

| Valor | Comportamiento |
| --- | --- |
| `raised` | Ilumina el borde orientado hacia la luz. Predeterminado. |
| `recessed` | Dibuja el reflejo hacia dentro, a una distancia igual al grosor del borde decorativo. Mantiene la dirección de la luz seleccionada. |
| `matte` | Suaviza la respuesta del borde. |

Consulta las opciones adicionales en la [Referencia de la API](https://edge.bolerish.com/es/docs/react/surface/#lighting-surface).

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

## Raised

Usa `edgeStyle: 'raised'` para resaltar el borde hacia fuera.

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

## Recessed

Usa `edgeStyle: 'recessed'` para dibujar el reflejo hacia dentro a una distancia igual al grosor del borde decorativo, por ejemplo en contenedores de input. Mantiene la dirección de la luz seleccionada.

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

## Matte

Usa `edgeStyle: 'matte'` para un borde más suave y discreto.

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

## Personalizar el reflejo

Cada superficie usa su propio color de texto, incluso si está anidada, y el border-radius del elemento DOM conectado. Cambia el reflejo con `color` y multiplica la intensidad compartida con `intensity`. Usa `shadowColor="transparent"` para quitar la sombra del borde opuesto. `borderWidth` cambia solo el grosor decorativo, no el borde real. Pasa las opciones a [Edge.Surface](https://edge.bolerish.com/es/docs/react/surface/#lighting-surface); no necesitas declarar variables CSS.

El efecto simula de forma aproximada la dirección de la luz sobre rectángulos alineados con los ejes, sin reproducir una fuente de luz puntual física. Cerca del centro, la intensidad del reflejo disminuye en una región proporcional al tamaño de la superficie.

Para usar pseudoelementos existentes o contenedores de inputs, consulta [Consideraciones de integración](https://edge.bolerish.com/es/docs/integration/).