首页html设置table阴影

html设置table阴影

时间: 2024-04-09 17:24:53 浏览: 182

在HTML中设置表格阴影可以通过CSS样式来实现。你可以使用box-shadow属性来添加阴影效果。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table> </body> </html> ``` 在上面的代码中，我们使用了box-shadow属性来给表格添加阴影效果。box-shadow属性的值由四个参数组成，分别是水平偏移量、垂直偏移量、模糊半径和阴影颜色。你可以根据需要调整这些参数来达到你想要的阴影效果。

阅读全文