diff --git a/src/components/card/card.less b/src/components/card/card.less
index 0b5a4da3fd..a51f2acf6b 100644
--- a/src/components/card/card.less
+++ b/src/components/card/card.less
@@ -1,18 +1,28 @@
 @class-prefix-card: ~'adm-card';
 
 .@{class-prefix-card} {
+  --border-radius: var(--adm-card-border-radius, 8px);
+  --padding-inline: var(--adm-card-padding-inline, 12px);
+  --header-border-width: var(--adm-card-header-border-width, 0.5px);
+  --header-border-color: var(
+    --adm-card-header-border-color,
+    var(--adm-color-border)
+  );
+  --header-padding-block: var(--adm-card-header-padding-block, 12px);
+  --body-padding-block: var(--adm-card-body-padding-block, 12px);
+
   background: var(--adm-color-background);
-  border-radius: 8px;
-  padding: 0 12px;
+  border-radius: var(--border-radius);
+  padding: 0 var(--padding-inline);
   &-header {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    padding: 12px 0;
+    padding: var(--header-padding-block) 0;
     &:not(:last-child) {
-      border-bottom: solid 0.5px var(--adm-color-border);
+      border-bottom: solid var(--header-border-width) var(--header-border-color);
     }
     &-title {
       font-size: var(--adm-font-size-7);
@@ -21,6 +31,6 @@
     }
   }
   &-body {
-    padding: 12px 0;
+    padding: var(--body-padding-block) 0;
   }
 }
diff --git a/src/components/card/index.en.md b/src/components/card/index.en.md
index 99ba11b432..5cf35b4aef 100644
--- a/src/components/card/index.en.md
+++ b/src/components/card/index.en.md
@@ -25,3 +25,14 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
 | onClick | The click event of the Card | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | The click event of the header area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | The left area of the header | `ReactNode` | - |
+
+### CSS Variables
+
+| Name | Description | Default | Global |
+| --- | --- | --- | --- |
+| --border-radius | Border radius of the button. | `8px` | `--adm-card-border-radius` |
+| --padding-inline | Horizontal padding of the card. | `12px` | `--adm-card-padding-inline` |
+| --header-border-width | Bottom border width of the card header. | `0.5px` | `--adm-card-header-border-width` |
+| --header-border-color | Bottom border color of the card header. | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| --header-padding-block | Vertical of the card header. | `12px` | `--adm-card-header-padding-block` |
+| --body-padding-block | Vertical padding of the card body. | `12px` | `--adm-card-body-padding-block` |
diff --git a/src/components/card/index.zh.md b/src/components/card/index.zh.md
index dc44c48382..d0569fa2c1 100644
--- a/src/components/card/index.zh.md
+++ b/src/components/card/index.zh.md
@@ -25,3 +25,14 @@
 | onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | header 左边区域 | `ReactNode` | - |
+
+### CSS 变量
+
+| 属性 | 说明 | 默认值 | 全局变量 |
+| --- | --- | --- | --- |
+| --border-radius | 圆角大小 | `8px` | `--adm-card-border-radius` |
+| --padding-inline | 水平内边距 | `12px` | `--adm-card-padding-inline` |
+| --header-border-width | header 分割线宽度 | `0.5px` | `--adm-card-header-border-width` |
+| --header-border-color | header 分割线颜色 | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| --header-padding-block | header 垂直内边距 | `12px` | `--adm-card-header-padding-block` |
+| --body-padding-block | body 垂直内边距 | `12px` | `--adm-card-body-padding-block` |