CSS3表格之表格样式（一）

你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！

最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。

废话不多说，上干货
一，今天只要提及两个表格，分别是斑马表格和圆角表格
以下是斑马表格，效果如下

第一步，新建HTML5文档（省略）
第二步，定义表格样式，表格样式里面包括3部分内容：边框，背景样式，内容显示样式和布局样式，这样说也可以是它喵的4种啊

第三步，定义列标题样式。列表题样式主要是涉及到背景图像的设计。

第4步，定义单元格样式，主要设置单元格的高度，边框线，补白

第五步，定义隔行变色样式，定义比边框色稍浅的背景色

<------------------------------------------华丽的分割线------------------------------------------->
2.圆角表格

第1步，新建HTML文档
第2步，在头部区域插入一个<style type="text/css"在下插入如下代码

第3步，统一单元格格式，定义边框，空袭效果
第4步，设计表格标题列样式，使用CSS3渐变设计标题列背景，添加阴影，营造立体效果

第5步，设计圆角效果
第6步，使用box-shadow制作表格的阴影，使用transition制作hover过渡效果，使用gradient制作表头渐变色，为