diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
index ff212fa640..deeab91b38 100644
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -10,7 +10,9 @@ import { Card } from 'antd';
ReactDOM.render(
更多} style={{ width: 300 }}>
- 卡片的内容
+ 卡片的内容
+ 卡片的内容
+ 卡片的内容
, mountNode);
````
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
new file mode 100644
index 0000000000..dd0766c775
--- /dev/null
+++ b/components/card/demo/border-less.md
@@ -0,0 +1,20 @@
+---
+order: 1
+title: 无边框
+---
+
+在灰色背景上使用无边框的卡片。
+
+````jsx
+import { Card } from 'antd';
+
+ReactDOM.render(
+
+
+ 卡片的内容
+ 卡片的内容
+ 卡片的内容
+
+
+, mountNode);
+````
diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md
index 51bdbda570..db607c8fdf 100644
--- a/components/card/demo/grid.md
+++ b/components/card/demo/grid.md
@@ -1,5 +1,5 @@
---
-order: 3
+order: 4
title: 栅格卡片
---
@@ -9,17 +9,19 @@ title: 栅格卡片
import { Card, Col, Row } from 'antd';
ReactDOM.render(
-
-
- 卡片的内容
-
-
- 卡片的内容
-
-
- 卡片的内容
-
-
+
+
+
+ 卡片的内容
+
+
+ 卡片的内容
+
+
+ 卡片的内容
+
+
+
, mountNode);
````
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index d9c2d0ec52..736b27f494 100644
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -1,5 +1,5 @@
---
-order: 4
+order: 5
title: 预加载的卡片
---
@@ -8,15 +8,9 @@ title: 预加载的卡片
````jsx
import { Card } from 'antd';
-const App = React.createClass({
- render() {
- return (
-
- Whatever content
-
- );
- },
-});
-
-ReactDOM.render(, mountNode);
+ReactDOM.render(
+
+ Whatever content
+
+, mountNode);
````
diff --git a/components/card/demo/no-padding.md b/components/card/demo/no-padding.md
index 68a60278ac..512caeca33 100644
--- a/components/card/demo/no-padding.md
+++ b/components/card/demo/no-padding.md
@@ -1,5 +1,5 @@
---
-order: 2
+order: 3
title: 更灵活的内容展示
---
diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md
index 1b55a6a605..5d738a457c 100644
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@@ -1,5 +1,5 @@
---
-order: 1
+order: 2
title: 简洁卡片
---
@@ -10,7 +10,9 @@ import { Card } from 'antd';
ReactDOM.render(
- 卡片的内容
+ 卡片的内容
+ 卡片的内容
+ 卡片的内容
, mountNode);
````
diff --git a/components/card/index.jsx b/components/card/index.jsx
index 50bc4a9298..0d3213ff47 100644
--- a/components/card/index.jsx
+++ b/components/card/index.jsx
@@ -2,11 +2,13 @@ import React from 'react';
import classNames from 'classnames';
export default props => {
- let { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, loading, ...other } = props;
+ let { prefixCls = 'ant-card', className, children, extra, bodyStyle,
+ title, loading, bordered = true, ...other } = props;
const classString = classNames({
[prefixCls]: true,
[className]: !!className,
[`${prefixCls}-loading`]: loading,
+ [`${prefixCls}-bordered`]: bordered,
});
if (loading) {
diff --git a/components/card/index.md b/components/card/index.md
index 0259f589d2..cf9af8fd64 100644
--- a/components/card/index.md
+++ b/components/card/index.md
@@ -20,6 +20,7 @@ english: Card
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
-| title | 卡片标题 | React.Element | 无 |
-| extra | 卡片右上角的操作区域 | React.Element | 无 |
-| bodyStyle | 内容区域自定义样式 | Object | 无 |
+| title | 卡片标题 | React.Element | - |
+| extra | 卡片右上角的操作区域 | React.Element | - |
+| bordered | 是否有边框 | Boolean | true |
+| bodyStyle | 内容区域自定义样式 | Object | - |
diff --git a/style/components/card.less b/style/components/card.less
index cc01f01a0b..bf000bab87 100644
--- a/style/components/card.less
+++ b/style/components/card.less
@@ -4,10 +4,19 @@
.@{card-prefix-cls} {
background: #fff;
border-radius: @border-radius-sm;
- box-shadow: @box-shadow-base;
font-size: @font-size-base;
position: relative;
overflow: hidden;
+ transition: all .3s;
+
+ &:hover {
+ box-shadow: 0 1px 4px rgba(100, 100, 100, .2);
+ }
+
+ &-bordered {
+ border: 1px solid @border-color-base;
+ border-color: @border-color-split;
+ }
&-head {
height: 48px;