Improve collapse style and add a custom style panel demo

components/collapse/__tests__/__snapshots__/demo.test.js.snap

@@ -143,6 +143,62 @@ exports[`test renders ./components/collapse/demo/borderless.md correctly 1`] = `
 </div>
 `;
 
+exports[`test renders ./components/collapse/demo/custom.md correctly 1`] = `
+<div
+  class="ant-collapse ant-collapse-borderless">
+  <div
+    class="ant-collapse-item ant-collapse-item-active"
+    style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;">
+    <div
+      aria-expanded="true"
+      class="ant-collapse-header"
+      role="tab">
+      <i
+        class="arrow" />
+      This is panel header 1
+    </div>
+    <div
+      class="ant-collapse-content ant-collapse-content-active"
+      role="tabpanel">
+      <div
+        class="ant-collapse-content-box">
+        <p>
+          
+            A dog is a type of domesticated animal.
+            Known for its loyalty and faithfulness,
+            it can be found as a welcome guest in many households across the world.
+          
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item"
+    style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;">
+    <div
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="tab">
+      <i
+        class="arrow" />
+      This is panel header 2
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item"
+    style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;">
+    <div
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="tab">
+      <i
+        class="arrow" />
+      This is panel header 3
+    </div>
+  </div>
+</div>
+`;
+
 exports[`test renders ./components/collapse/demo/mix.md correctly 1`] = `
 <div
   class="ant-collapse">

components/collapse/demo/custom.md

@@ -0,0 +1,46 @@
+---
+order: 3
+title:
+  zh-CN: 自定义面板
+  en-US: Custom Panel
+---
+
+## zh-CN
+
+自定义各个面板的背景色、圆角和边距。
+
+## en-US
+
+Customize the background, border and margin styles for each panel.
+
+````jsx
+import { Collapse } from 'antd';
+const Panel = Collapse.Panel;
+
+const text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+const customPanelStyle = {
+  background: '#f7f7f7',
+  borderRadius: 4,
+  marginBottom: 24,
+  border: 0,
+};
+
+ReactDOM.render(
+  <Collapse bordered={false} defaultActiveKey={['1']}>
+    <Panel header="This is panel header 1" key="1" style={customPanelStyle}>
+      <p>{text}</p>
+    </Panel>
+    <Panel header="This is panel header 2" key="2" style={customPanelStyle}>
+      <p>{text}</p>
+    </Panel>
+    <Panel header="This is panel header 3" key="3" style={customPanelStyle}>
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, mountNode);
+````

components/collapse/style/index.less

@@ -14,13 +14,10 @@
   background-color: @background-color-base;
   border-radius: 3px;
   border: 1px solid @border-color-base;
+  border-bottom: 0;
 
   & > &-item {
-    border-top: 1px solid @border-color-base;
-    &:first-child {
-      border-top: 0;
-    }
-
+    border-bottom: 1px solid @border-color-base;
     > .@{collapse-prefix-cls}-header {
       height: 38px;
       line-height: 38px;
@@ -88,16 +85,19 @@
     border: 0;
   }
 
-  &-borderless > &-item {
+  &-borderless > &-item-active {
     border: 0;
   }
 
+  &-borderless > &-item > &-content {
+    background-color: transparent;
+    border-top: 1px solid @border-color-base;
+  }
+
   &-borderless > &-item > &-header {
-    border-bottom: 1px solid @border-color-base;
     transition: all .3s;
-    border-radius: @border-color-base @border-color-base 0 0;
     &:hover {
-      background-color: #fcfcfc;
+      background-color: @background-color-base;
     }
   }
 }