html5+table表格圆⾓,html5table圆⾓
在⼯作中遇到这么⼀个问题 —— 美⼯画了⼀个表格，表格是使⽤圆⾓的。发现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元
季度保洁卡border radius什么意思
1008元(28元/⼩时)
36⼩时保洁服务
6个⽉有效
平台通⽤券共计108元
年度保洁卡
3744元(26元/⼩时)
144时保洁服务
12个⽉内有效
平台通⽤券共计288元
备注：如果给单元格设置border样式，则中间重合的部分显⽰是加粗的，因此需要单独的设置样式，保证所有的单元格边线不重复。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。