在table中使用border-radius
先來看看設計圖吧：
拿到圖，先想到還是表格，table標簽，可是，table表格是矩形的，沒關系，我們有border-radius呀，效果如下：
給table加沒有效果但可以給每個單元格加啊，嗯，好像很有道理的樣子，試試：
咦，怎么和想象的不一樣捏，左右上角的直線角還在呢，而底部的圓角並沒有效果
后來找到問題是：```CSS3's border-radius property and border-collapse:collapse don't mix.```
如此看來collapse是用不了了，那使用border-collapse: separate呢，如下:
這里聲明下border-collapse屬性的區別了，w3school是這樣說的：
於是我們看到separate的問題就在於表格邊框並不合並，這樣會使得邊框看起來很粗，實在太丑，難保不會被設計獅打死，
所以問題在於，用border-radius形成圓角，可以，但是在table表單中border-collapse:collapse和border-radius不相容，使用border-collapse:separate可以實現圓角，但單元格邊框不會合並
后來解決辦法在[這里](http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i)找到，原題最高票答案不適合此需求，因為給出的解決方案是單元格沒有邊框的，並且是給table加上背景色，會導致單元格加上border后顏色也會同table一樣，倒是看看第二票答案，demo：
關鍵在於table標簽內不要寫border=‘1’，這個border是給單元格加上邊框，這里我們單元格是需要邊框，但在html里的table標簽里直接寫就會讓每個單元格有邊框，合起來就變粗了，於是通過table tr th,table tr td這樣來給單元格加上想要的邊框，如下：
table tr th,table tr td { border-right: 1px solid #d4d8da; border-bottom: 1px solid #d4d8da; padding: 5px; }
控制單邊的邊框生成。
哦啦，問題解決了：
可看demo在此http://codepen.io/puronglong/pen/PPeEML#0