Add card borderd prop

components/card/demo/basic.md

@@ -10,7 +10,9 @@ import { Card } from 'antd';
 
 ReactDOM.render(
   <Card title="卡片标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
-    卡片的内容
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
   </Card>
 , mountNode);
 ````

components/card/demo/border-less.md

@@ -0,0 +1,20 @@
+---
+order: 1
+title: 无边框
+---
+
+在灰色背景上使用无边框的卡片。
+
+````jsx
+import { Card } from 'antd';
+
+ReactDOM.render(
+  <div style={{ background: '#ECECEC', padding: '30px' }}>
+    <Card title="卡片标题" bordered={false} style={{ width: 300 }}>
+      <p>卡片的内容</p>
+      <p>卡片的内容</p>
+      <p>卡片的内容</p>
+    </Card>
+  </div>
+, mountNode);
+````

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(
-  <Row>
+  <div style={{ background: '#ECECEC', padding: '30px' }}>
-    <Col span="8">
+    <Row>
-      <Card title="卡片标题">卡片的内容</Card>
+      <Col span="8">
-    </Col>
+        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
-    <Col span="8">
+      </Col>
-      <Card title="卡片标题">卡片的内容</Card>
+      <Col span="8">
-    </Col>
+        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
-    <Col span="8">
+      </Col>
-      <Card title="卡片标题">卡片的内容</Card>
+      <Col span="8">
-    </Col>
+        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
-  </Row>
+      </Col>
+    </Row>
+  </div>
 , mountNode);
 ````
 

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({
+ReactDOM.render(
-  render() {
+  <Card loading title="卡片标题" style={{ width: 300 }}>
-    return (
+    Whatever content
-      <Card loading title="卡片标题" style={{ width: 300 }}>
+  </Card>
-        Whatever content
+, mountNode);
-      </Card>
-    );
-  },
-});
-
-ReactDOM.render(<App />, mountNode);
 ````

components/card/demo/no-padding.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title: 更灵活的内容展示
 ---
 

components/card/demo/simple.md

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 2
 title: 简洁卡片
 ---
 
@@ -10,7 +10,9 @@ import { Card } from 'antd';
 
 ReactDOM.render(
   <Card style={{ width: 300 }}>
-    卡片的内容
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
   </Card>
 , mountNode);
 ````

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) {

components/card/index.md

@@ -20,6 +20,7 @@ english: Card
 
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
-| title    | 卡片标题 | React.Element   |  无  |
+| title    | 卡片标题 | React.Element   |  -  |
-| extra    | 卡片右上角的操作区域 | React.Element   |  无  |
+| extra    | 卡片右上角的操作区域 | React.Element   | - |
-| bodyStyle | 内容区域自定义样式 | Object   |  无  |
+| bordered | 是否有边框 | Boolean   |  true  |
+| bodyStyle | 内容区域自定义样式 | Object   |  -  |

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;