---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/card-styles'
title: '装饰卡片 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:42:31+00:00'
updated: '2026-10-24T06:23:23+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  给卡片配上适合网站的外观：卡片 Type 的配色方案、Style 面板的圆角和阴影。完成后您得到一张卡片，可在一行中重复用于功能、团队成员或价格。先在页面上放卡片，请参阅 添加卡片。
  该视频跟随下文步骤：给卡片浅色外观、圆角和柔和阴影。
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T06:23:23+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 装饰卡片
      description: |-
        给卡片配上适合网站的外观：卡片 Type 的配色方案、Style 面板的圆角和阴影。完成后您得到一张卡片，可在一行中重复用于功能、团队成员或价格。先在页面上放卡片，请参阅 添加卡片。
        该视频跟随下文步骤：给卡片浅色外观、圆角和柔和阴影。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:42:31+0000'
      dateModified: '2026-10-24T06:23:23+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/card-styles'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/card-styles'
      description: |-
        给卡片配上适合网站的外观：卡片 Type 的配色方案、Style 面板的圆角和阴影。完成后您得到一张卡片，可在一行中重复用于功能、团队成员或价格。先在页面上放卡片，请参阅 添加卡片。
        该视频跟随下文步骤：给卡片浅色外观、圆角和柔和阴影。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 装饰卡片.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [让元素随悬停响应](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects)
- [使用品牌颜色](/zh-hans/hc/documentation/learn-dxpr-builder/design/colour-and-branding)

给卡片配上适合网站的外观：卡片 **Type** 的配色方案、**Style** 面板的圆角和阴影。完成后您得到一张卡片，可在一行中重复用于功能、团队成员或价格。先在页面上放卡片，请参阅 [添加卡片](/hc/documentation/learn-dxpr-builder/elements/card)。

该视频跟随下文步骤：给卡片浅色外观、圆角和柔和阴影。

  ## 装饰卡片

1. 悬停卡片，打开 **More** 并选择 **Settings**。
2. 在 **Type** 下选择 **Light**。
3. 打开 **Style** 面板。
4. 将 **Border radius** 设为 8。
5. 将 **Drop shadow** 设为 2。
6. 点击 **Save**。

## 您会看到的内容

卡片有了浅色背景、圆角和柔和阴影。它的 **Header** 栏在顶部，**Title** 打开正文，您在里面添加的元素跟在下方。

一个 **Type** 给整张卡片上色，不只页眉。**Primary**、**Secondary**、**Success**、**Info**、**Warning**、**Danger** 和 **Dark** 用该主题色填满卡片并将文本设为白色。**Light** 给浅色背景配普通文本。**Default** 将卡片留给主题。

## 设置

| 设置 | 位置 | 作用 |
|---|---|---|
| **Header** | **General** | 卡片顶部的栏中的文本；留空则无栏 |
| **Title** | **General** | 卡片正文顶部的标题 |
| **Type** | **General** | 整张卡片的配色方案；默认为 **Default** |
| **Background**、**Font color** | **Style** | 自己的颜色：**Type** 为 **Default** |
| **Border radius** | **Style** | 圆角，单位像素 |
| **Drop shadow** | **Style** | 深度，1 到 5 |
| **Border**（盒模型）、**Border style**、**Border color** | **Style** | 一侧或多侧的边框 |

## 卡片样式

- **扁平卡片**：**Border style** **Solid**、浅色 **Border color**、**Border radius** 4、无阴影。
- **浮起卡片**：**Drop shadow** 2、**Border style** **None**、**Border radius** 8。
- **高亮卡片**：盒模型中 **Border** 左侧设为 4，**Border style** **Solid**，**Border color** 用强调色。
- **悬停上浮的卡片**：**Drop shadow** 1（**Style** 中），**Hover style** 中 4；请参阅 [让元素随悬停响应](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects)。

## 一行多张卡片

要做功能卡片、团队成员或价格的网格：

1. 添加一行，选择三列或四列等宽布局。
2. 每列添加一张卡片，给每张卡片同样的 **Type** 和 **Style** 值。
3. 打开行的 **More** 菜单，选择 **Settings** 并打开 **Equal-height columns**。

列对齐了，但每张卡片仍与其内容等高。请让每张卡片的文本长度差不多，卡片底部才能对齐。做价格表时，用另一个 **Type** 或更深的 **Drop shadow** 突出推荐方案。

## 如果您看不到样式

- **Style 面板中的 Background 或 Font color 无效。** 一个 **Type**（非 **Default**）用胜出的主题类定卡片颜色，盖过 **Style** 面板。请将 **Type** 设为 **Default** 再选自己的颜色。
- **彩色卡片上的白字难读。** 很多主题的 **Warning** 和 **Info** 颜色浅，而这些类型始终用白字。请选择更深的 **Type**，或用保留普通文本颜色的 **Light**。
- **阴影不显示。** **Drop shadow** 为 0，即无阴影。请设为 1 或更大。

## 接下来做什么？

- [添加卡片](/hc/documentation/learn-dxpr-builder/elements/card)：添加卡片并用元素填充。
- [让元素随悬停响应](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects)：访客指向时让卡片上浮。
- [使用品牌颜色](/zh-hans/hc/documentation/learn-dxpr-builder/design/colour-and-branding)：让卡片颜色与网站其他部分一致。