CSS组件之带模糊效果的表格（table）样式

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课 - CSS组件之带模糊效果的表格（table）样式</title>
    <style>
        strong {
            font-weight: bold;
        }
        table {
            background: #f5f5f5;
            border-collapse: separate;
            box-shadow: inset 0 1px 0 #fff;
            font-size: 12px;
            line-height: 24px;
            text-align: left;
            width: 100%;
        }
        th {
            background: linear-gradient(#777, #444);
            border-left: 1px solid #555;
            border-right: 1px solid #777;
            border-top: 1px solid #555;
            border-bottom: 1px solid #333;
            box-shadow: inset 0 1px 0 #999;
            color: #fff;
            font-weight: bold;
            padding: 10px 15px;
            position: relative;
            text-shadow: 0 1px 0 #000;
        }
        th:after {
            background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
            content: '';
            display: block;
            height: 25%;
            left: 0;
            margin: 1px 0 0 0;
            position: absolute;
            top: 25%;
            width: 100%;
        }
        th:first-child {
            border-left: 1px solid #777;
            box-shadow: inset 1px 1px 0 #999;
        }
        th:last-child {
            box-shadow: inset -1px 1px 0 #999;
        }
        td {
            border-right: 1px solid #fff;
            border-left: 1px solid #e8e8e8;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #e8e8e8;
            padding: 10px 15px;
            position: relative;
            transition: all 300ms;
        }
        td:first-child {
            box-shadow: inset 1px 0 0 #fff;
        }
        td:last-child {
            border-right: 1px solid #e8e8e8;
            box-shadow: inset -1px 0 0 #fff;
        }
        tr:nth-child(odd) td {
            background: #f1f1f1;
        }
        tr:last-of-type td {
            box-shadow: inset 0 -1px 0 #fff;
        }
        tr:last-of-type td:first-child {
            box-shadow: inset 1px -1px 0 #fff;
        }
        tr:last-of-type td:last-child {
            box-shadow: inset -1px -1px 0 #fff;
        }
        tbody:hover td {
            color: transparent;
            text-shadow: 0 0 3px #aaa;
        }
        tbody:hover tr:hover td {
            color: #444;
            text-shadow: 0 1px 0 #fff;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>网站</th>
        <th>网址</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><strong>三十课</strong></td>
        <td>30ke.cn</td>
        <td>源自程序员，服务程序员！</td>
    </tr>
    <tr>
        <td><strong>42度空间</strong></td>
        <td>42du.cn</td>
        <td>源自程序员，服务程序员！</td>
    </tr>
    <tr>
        <td><strong>思否</strong></td>
        <td>sf.gg</td>
        <td>源自程序员，服务程序员！</td>
    </tr>
    </tbody>
</table>
</body>
</html>