在工作中遇到這么一個問題 —— 美工畫了一個表格，表格是使用圓角的。發現table這個標簽畫圓角很麻煩，因此使用了如下技術解決問題：

1、div 以 display : table;顯示

2、border-radius: 10px 0px 0px 0px;順序依次是 上 右 下 左

3、通過CSS3偽類查找，設置樣式

?

      <style>
.div_table{ display: table;}
.div_table_row{display: table-row;}
.div_table_cell{display: table-cell;}

.ad_red{
    color : #f74948;
}
div.div_table_cell {
    border-top: 1px solid #f74948;
    border-left: 1px solid #f74948;
}
/*類為div_table_cell的最后一個設置邊線為紅色*/
div.div_table_cell:last-child{
    border-right: 1px solid #f74948;
}
/*類為div_table_row的最后一個下面的節點類為div_table_cell底邊線為紅色*/
div.div_table_row:last-child .div_table_cell{
    border-bottom: 1px solid #f74948;
}
/*左上角為圓角，順序依次是 上 右 下 左*/
.table_radius_top_left{
    border-radius: 10px 0px 0px 0px;
}
/*右上角為圓角*/
.table_radius_top_right{
    border-radius: 0px 10px 0px 0px;
}
/*左下角為圓角*/
.table_radius_bottom_left{
    border-radius: 0px 0px 0px 10px;
}
/*右下角為圓角*/
.table_radius_bottom_right{
    border-radius: 0px 0px 10px 0px;
}
</style>

<div class="div_table all_width margin_bottom_10">
	<div class="div_table_row">
		<div class="div_table_cell table_radius_top_left" >
			產品內容
		</div>
		<div class="div_table_cell">
			售價（元）
		</div>
		<div class="div_table_cell">
			服務內容
		</div>
		<div class="div_table_cell">
			使用要求
		</div>
		<div class="div_table_cell table_radius_top_right">
			活動政策
		</div>
	</div>
	<div class="div_table_row">
		<div class="div_table_cell">
			12小時保潔卡
		</div>
		<div class="div_table_cell">
			<span class="ad_red">336</span>元（28元/小時）
		</div>
		<div class="div_table_cell">
			12小時保潔服務
		</div>
		<div class="div_table_cell">
			3個月內有效
		</div>
		<div class="div_table_cell">
			平臺通用券<br>共計<span class="ad_red">26</span>元
		</div>
	</div>
	<div class="div_table_row">
		<div class="div_table_cell">
			季度保潔卡
		</div>
		<div class="div_table_cell">
			<span class="ad_red">1008</span>元（28元/小時）
		</div>
		<div class="div_table_cell">
			36小時保潔服務
		</div>
		<div class="div_table_cell">
			6個月有效
		</div>
		<div class="div_table_cell">
			平臺通用券共計<span class="ad_red">108</span>元
		</div>
	</div>
	<div class="div_table_row">
		<div class="div_table_cell table_radius_bottom_left">
			年度保潔卡
		</div>
		<div class="div_table_cell">
			<span class="ad_red">3744</span>元（26元/小時）
		</div>
		<div class="div_table_cell">
			144時保潔服務
		</div>
		<div class="div_table_cell">
			12個月內有效
		</div>
		<div class="div_table_cell table_radius_bottom_right ">
			平臺通用券共計<span class="ad_red">288</span>元
		</div>
	</div>
</div>
    

?

備注：如果給單元格設置border樣式，則中間重合的部分顯示是加粗的，因此需要單獨的設置樣式，保證所有的單元格邊線不重復。?

?