表格行的边框半径和阴影
创始人
2024-12-10 08:01:26
0次

要为表格行添加边框半径和阴影，可以使用CSS的属性来实现。以下是一个示例代码，演示如何在HTML中添加表格行的边框半径和阴影。

HTML代码：


  

    单元格1
    单元格2
  

  

    单元格3
    单元格4

CSS代码：

table {
  border-collapse: separate; /* 确保边框与阴影分离 */
  border-spacing: 0; /* 设置边框间距为0，使边框半径效果可见 */
}

tr {
  border-radius: 10px; /* 设置表格行的边框半径为10像素 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加表格行的阴影效果 */
}

td {
  padding: 10px; /* 设置单元格的内边距，使内容与边框之间有间隔 */
}

通过将上述CSS代码添加到页面的