html5 table 圆角

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

1、div 以 display : table;显示

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

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

 



产品内容
售价(元)
服务内容
使用要求
活动政策
12小时保洁卡
336元(28元/小时)
12小时保洁服务
3个月内有效
平台通用券
共计26
季度保洁卡
1008元(28元/小时)
36小时保洁服务
6个月有效
平台通用券共计108
年度保洁卡
3744元(26元/小时)
144时保洁服务
12个月内有效
平台通用券共计288

 

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

 

html5 table 圆角_第1张图片

  • html5 table 圆角_第2张图片
  • 大小: 19.4 KB
  • 查看图片附件

你可能感兴趣的:(css,css3,sass,less)