border表格制作css

基础边框样式设置

使用border属性为元素添加边框，可指定宽度、样式和颜色：

.box {
  border: 1px solid #000; /* 宽度1px、实线、黑色 */
}

支持多种边框样式：

• solid 实线
• dashed 虚线
• dotted 点线
• double 双线
• groove 3D凹槽
• ridge 3D凸脊

单独控制各边边框

通过方向属性独立设置每边边框：

.element {
  border-top: 2px dashed red;
  border-right: 1px dotted blue;
  border-bottom: 3px double green;
  border-left: 1px solid gray;
}

圆角边框效果

使用border-radius创建圆角：

.rounded {
  border-radius: 8px; /* 统一圆角 */
  border: 2px solid #333;
}

可分别设置四个角：

.custom-radius {
  border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 */
}

边框阴影效果

通过box-shadow增强视觉效果：

.shadow-box {
  border: 1px solid #ddd;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}

表格特定边框样式

为表格添加合并边框：

table {
  border-collapse: collapse; /* 边框合并模式 */
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

边框动画效果

结合过渡实现交互效果：

.animated-border {
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}
.animated-border:hover {
  border-color: #ff5722;
}