实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阴影背景练习</title> <style type="text/css"> table,th,td{ border: 1px solid #333; padding: 10px; } table{ border-collapse: collapse; text-align: center; width: 40%; margin: 100px; box-shadow: 5px 5px 6px #582; background-image: url(../322/images/bg.png); background-repeat: no-repeat; background-size: cover; } td img{ width: 30px; border-radius: 50%; box-shadow: 3px 3px 3px #588; } th{ background-color: rgba(180,241,695,0.4); } caption{ font-size: 1.6em; font-weight: bolder; padding: 20px; } </style> </head> <body> <table > <caption>出差统计</caption> <tr> <th colspan="2" rowspan="2">姓名</th> <th colspan="3">出差地区</th> </tr> <tr> <th>北京</th> <th>上海</th> <th>广州</th> </tr> <tr> <td><img src="../images/1.jpg"></td> <td>张三</td> <td>1天</td> <td>3天</td> <td>5天</td> </tr> <tr> <td><img src="../images/2.jpg"></td> <td>李四</td> <td>2天</td> <td>4天</td> <td>6天</td> </tr> <tr> <td><img src="../images/3.jpg"></td> <td>王五</td> <td>3天</td> <td>6天</td> <td>9天</td> </tr> <tr> <td><img src="../images/4.jpg"></td> <td>赵六</td> <td>6天</td> <td>9天</td> <td>3天</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例