html5怎么倒圆角,html5 table 圆角

在工作中遇到这么一个问题 —— 美工画了一个表格，表格是使用圆角的。发现table这个标签画圆角很麻烦，因此使用了如下技术解决问题：

1、div 以 display : table;显示

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

3、通过CSS3伪类查找，设置样式

.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;

}

产品内容

售价(元)

服务内容

使用要求

活动政策

12小时保洁卡

336元(28元/小时)

12小时保洁服务

3个月内有效

平台通用券
共计26元

季度保洁卡

1008元(28元/小时)

36小时保洁服务

6个月有效

平台通用券共计108元

年度保洁卡

3744元(26元/小时)

144时保洁服务

12个月内有效

平台通用券共计288元

备注：如果给单元格设置border样式，则中间重合的部分显示是加粗的，因此需要单独的设置样式，保证所有的单元格边线不重复。