表格是一种二维呈现，HTML中产生的表格看起来就像和纸上画的一样。但其实它也能实现一些立体的效果，就像这儿展示的，当鼠标悬停在某一行上时，该行突出在渐变的灰色背景上，字体微微变大，有一种被放大的效果。这是通过在<tr>上加上hover选择器，并设置了background属性值为inear-gradient(#fff, #aaa)，并增加了font-size。
【示例】
-
HTML
<table> <caption> IE浏览器发展大事记 </caption> <thead> <tr> <th>版本</th> <th>发布时间</th> <th>绑定系统</th> </tr> </thead> <tbody> <tr> <td>Internet Explorer 1</td> <td>1995年8月</td> <td>Windows 95 Plus! Pack</td> </tr> <tr> <td>Internet Explorer 2</td> <td>1995年11月</td> <td>Windows和Mac</td> </tr> <tr> <td>Internet Explorer 3</td> <td>1996年8月</td> <td>Windows 95 OSR2</td> </tr> <tr> <td>Internet Explorer 4</td> <td>1997年9月</td> <td>Windows 98</td> </tr> <tr> <td>Internet Explorer 5</td> <td>1999年3月</td> <td>Windows 98 Second Edition</td> </tr> <tr> <td>Internet Explorer 5.5</td> <td>2000年9月</td> <td>Windows Millennium Edition</td> </tr> <tr> <td>Internet Explorer 6</td> <td>2001年10月</td> <td>Windows XP</td> </tr> <tr> <td>Internet Explorer 7</td> <td>2006年下半年</td> <td>Windows Vista</td> </tr> <tr> <td>Internet Explorer 8</td> <td>2009年3 月</td> <td>Windows 7</td> </tr> <tr> <td>Internet Explorer 9</td> <td>2011年3月</td> <td>Windows 7</td> </tr> <tr> <td>Internet Explorer 10</td> <td>2012年</td> <td>Windows 8</td> </tr> <tr> <td>Internet Explorer 11</td> <td>2013年6月</td> <td>Windows 8.1</td> </tr> <tr> <td>Spartan浏览器</td> <td>2015年3月</td> <td>Windows 10</td> </tr> </tbody> </table> -
CSS
table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; } caption { font-size: larger; margin: 1em auto; } th, td { padding: .65em; } th, td { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-align: center; } tbody tr:hover { background: linear-gradient(#fff, #aaa); font-size: 17px; }