diff --git a/packages/devui-vue/devui/card/src/card-types.ts b/packages/devui-vue/devui/card/src/card-types.ts
index 08e2c5e3a9..382baa7cac 100644
--- a/packages/devui-vue/devui/card/src/card-types.ts
+++ b/packages/devui-vue/devui/card/src/card-types.ts
@@ -10,7 +10,7 @@ export const cardProps = {
     default: '',
   },
   shadow: {
-    type: String as PropType<'alway' | 'hover' | 'never'>,
+    type: String as PropType<'always' | 'hover' | 'never'>,
     default: 'hover',
   },
 } as const;
diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md
index 96f882e674..33d468b10a 100644
--- a/packages/devui-vue/docs/components/card/index.md
+++ b/packages/devui-vue/docs/components/card/index.md
@@ -30,7 +30,6 @@
   </d-card>
 </template>
 <style lang="scss">
-@import '@devui-design/icons/icomoon/devui-icon.css';
 
 .card-demo-basic {
   cursor: pointer;
@@ -124,7 +123,6 @@
   </d-card>
 </template>
 <style lang="scss">
-@import '@devui-design/icons/icomoon/devui-icon.css';
 
 .card-demo-use-img {
   cursor: pointer;
@@ -189,7 +187,6 @@
   </d-card>
 </template>
 <style lang="scss">
-@import '@devui-design/icons/icomoon/devui-icon.css';
 
 .card-demo-custom-area {
   cursor: pointer;
@@ -239,66 +236,13 @@
 
 :::
 
-<style lang="scss">
-@import '@devui-design/icons/icomoon/devui-icon.css';
-.card-demo-icon {
-  cursor: pointer;
-  font-size: 16px;
-  margin-right: 8px;
-  vertical-align: middle;
-}
-.card-demo-icon + span {
-  vertical-align: middle;
-}
-.card-block {
-  margin-right: 16px;
-  i{
-    cursor: pointer;
-    font-size: 16px;
-    margin-right: 8px;
-    vertical-align: middle;
-  }
-  i + span {
-    vertical-align: middle;
-  }
-}
-.d-card {
-  cursor: pointer;
-  transition:
-    box-shadow .3s cubic-bezier(.645,.045,.355,1),
-    transform .3s cubic-bezier(.645,.045,.355,1);
-  &:hover {
-    box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
-    transform: translateY(-5px);
-  }
-}
-.card-container {
-  width: 350px;
-}
-img {
-  max-width: none;
-}
-.action-text {
-  color: #8a8e99;
-}
-.custom-avatar {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
-  .custom-star-action {
-    font-size: 20px;
-    cursor: pointer;
-  }
-}
-</style>
-
 ### Card 参数
 
-| 参数   | 类型                             | 默认      | 说明                                                         | 跳转 Demo                 |
-| :----- | :------------------------------- | :-------- | :----------------------------------------------------------- | :------------------------ |
-| src    | `string`                         | ''        | 可选，图片路径                                               | [使用图片](#使用图片)     |
-| align  | `'start'\|'end'\|'spaceBetween'` | `'start'` | 可选，操作区域对齐方式，分别对应起始对齐，尾部对齐，拉伸对齐 | [自定义区域](#自定义区域) |
-| shadow | `'always'\|'hover'\|'never'`     | `'hover'` | 可选，设置增强阴影显示时机                                   | [阴影效果](#阴影效果)     |
+| 参数   | 类型                          | 默认      | 说明                                                         | 跳转 Demo                 |
+| :----- |:----------------------------| :-------- | :----------------------------------------------------------- | :------------------------ |
+| src    | `string`                    | ''        | 可选，图片路径                                               | [使用图片](#使用图片)     |
+| align  | [IAlignType](#ialigntype)   | `'start'` | 可选，操作区域对齐方式，分别对应起始对齐，尾部对齐，拉伸对齐 | [自定义区域](#自定义区域) |
+| shadow | [IShadowType](#ishadowtype) | `'hover'` | 可选，设置增强阴影显示时机                                   | [阴影效果](#阴影效果)     |
 
 ### Card 插槽
 
@@ -310,3 +254,17 @@ img {
 | title    | 卡片的主要内容描述，一般定义为卡片名称 |
 | subtitle | 对标题的补充，可包含标签等信息         |
 | actions  | 决策作用，可以包含操作文本或者操作图标 |
+
+### Card 类型定义
+
+#### IAlignType
+
+```ts
+type IAlignType = 'start' | 'end' | 'spaceBetween';
+```
+
+#### IShadowType
+
+```ts
+type IShadowType = 'always' | 'hover' | 'never';
+```