首页>案例集

CSS3案例集04:斑马条纹的渐变圆角表格

利用CSS3提供的伪类选择器,特别是子元素选择器nth-child,作出斑马条纹的表格再也不是难事了,而且利用nth-child(αn+β)这样的表达式可以实现分组的效果,棒呆!

斑马条纹表格.jpg

查看效果

下载地址

链接: https://pan.baidu.com/s/1i4BcHLj 密码: vehy

一、案例知识点

  • nth-child伪类选择器的多种使用

  • border-radius在表格上的运用

  • box-shadow内阴影的设置

二、主要代码

1、CSS部分代码

.bordered th,.bordered td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
}
.bordered  th{
	box-shadow:0 1px 0 rgba(255,255,255,.8) inset;/*内阴影*/
	}
.bordered th:last-child,.bordered td:last-child{
	border-right:none;
	}
.bordered tr:last-child td{
	border-bottom:none;}
th:first-child{
	border-radius:10px 0 0 0;}
th:last-child{
	border-radius:0 10px 0 0;}
tr:last-child td:first-child{
	border-radius:0 0 0 10px;}
tr:last-child td:last-child{
	border-radius:0 0 10px 0;}
tr:nth-child(4n+1) td{/*4n+1,表示4个位一组,以第一个开头*/
	background-color:#93e8d7;
	}
tr:nth-child(4n+2) td{
	background-color:#73dfd4;
	}
tr:nth-child(4n+3) td{
	background-color:#3ed0ce;}
tr:nth-child(4n+4) td{
	background-color:#15c4c9;}
tr:first-child th{/*第一行*/
	background-color:#00aba9;
	color:#000;
	}
tr:hover td{
	background-color:#f6f793;
	color:#000;
	cursor:pointer;}

点赞


1
保存到:

相关文章

Top