---
title: "Surface"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Surface for layered content containers and visual depth hierarchy. Multiple elevation levels and shapes for card alternatives and nested layouts."
url: https://frutjam.com/zh-hant/components/surface
---

# Surface Component

表面元件是多功能的佈局基元，可建立分層的視覺層次結構和內容容器。表面採用語義 HTML 構建，提供靈活的深度和樣式選項。 Frutjam 表面系統支援多種尺寸、形狀和層，非常適合卡片替代、內容塊和嵌套佈局。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級              | 類型 | 描述          |
| --------------- | --- | ----------- |
| surface         | 根據 | 基面容器        |
| surface-1       | 風格 | 海拔高度 1（微妙）  |
| surface-2       | 風格 | 海拔 2 級      |
| surface-outline | 風格 | 帶有可見邊框的透明填充 |
| surface-dashed  | 風格 | 虛線邊框樣式      |
| surface-rounded | 風格 | 邊角適度圓潤      |
| surface-xs      | 尺寸 | 超小襯墊        |
| surface-sm      | 尺寸 | 小填充         |
| surface-md      | 尺寸 | 中等填充（預設）    |
| surface-lg      | 尺寸 | 大填充         |
| surface-xl      | 尺寸 | 超大襯墊        |

## 基本用法

## 表面層

使用 `surface-1` 和 `surface-2` 透過混合基底色與前景色來建立深度層次結構。

```html
<div class="surface p-4">Base</div>
<div class="surface surface-1 p-4">Surface 1 — subtle lift</div>
<div class="surface surface-2 p-4">Surface 2 — more contrast</div>
```

## 表面形狀

```html
<div class="surface surface-md">Default (square)</div>
<div class="surface surface-md surface-rounded">Rounded</div>
```

## 邊框樣式

對於由邊框定義的透明容器，請使用 `surface-outline` 或 `surface-dashed`。當嵌套在彩色圖層內時，它們可以正常工作，因為背景是明確透明的。

```html
<div class="surface surface-1 surface-rounded surface-md">
  <p class="mb-3 font-medium">Surface 1 (colored parent)</p>
  <div class="flex gap-3">
    <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div>
    <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div>
  </div>
</div>
```

## 表面尺寸

大小實用程式透過 `--surface--padding` 設定內部填滿。不要與 Tailwind `p-*` 實用程式結合使用 - 它們會覆蓋變數並破壞尺寸類別。

```html
<div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div>
<div class="surface surface-sm surface-rounded">Small (1rem)</div>
<div class="surface surface-md surface-rounded">Medium (1.5rem)</div>
<div class="surface surface-lg surface-rounded">Large (2rem)</div>
<div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div>
```

## 嵌套曲面

```html
<div class="surface surface-1 p-6 rounded-lg">
  <h3>Outer Surface</h3>
  <div class="surface surface-2 p-4 rounded mt-4">
    <p>Inner Surface</p>
  </div>
</div>
```