不多比比直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 80%;
border-spacing: 0;
/* border-spacing: 改变边框的间距 0就是没有边距 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 1px 1px #ccc;
/* 代表阴影 第一个参数代表左右 第二个参数代表上下 第三个参数代表模糊 */
font: 14px 'trebuchet Ms';
color: #444;
margin: 0 auto;
}
table td,
table th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 15px;
/* 决定边框的大小 */
text-align: left;
}
table th {
border-top: none;
/* 取消边框 */
background: #dce9f9;
background-image: linear-gradient(to top, #ebf3fc, #dce9f9)
}
table td:first-child,
table th:first-child {
border-left: none;
}
table th:first-child {
border-top-left-radius: 8px;
}
table th:last-child {
border-top-right-radius: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>id</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Date</th>
</tr>
</table>
</body>
</html> 运行效果图
总结
/* border-spacing: 改变边框的间距 0就是没有边距 */
padding: 15px;
/* 决定边框的大小 */
box-shadow: 0 1px 1px #ccc;
代表阴影 第一个参数代表左右 第二个参数代表上下 第三个参数代表模糊
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background-image: linear-gradient(to top, #ebf3fc, #dce9f9)
背景渐变第一个是方向,第二个是原色，第三个参数是过度色
