思源美化数据表格与渐变色

/* 数据库渐变色线条 (持续显示) - 优化版 */
/* 基础表格样式 */
.av__container .av__first-row,
.av__container .av__row {
border-bottom: 1px solid var(--b3-border-color);
}
.av__container .av__cell {
border-right: 1px solid var(--b3-border-color);
}
.av__container .av__header {
border-bottom: 2px solid var(--b3-border-color);
}

/* 为表格容器添加持续的渐变色边框 */
.av__container {
position: relative;
/* 设置渐变边框 */
border: 1px solid transparent;
background-clip: padding-box; /* 确保背景不覆盖边框 */
background-image:
linear-gradient(to right,
rgba(255,154,158,0.2),
rgba(255,154,158,0.8),
rgba(250,208,196,0.8),
rgba(161,140,209,0.8),
rgba(251,194,235,0.8),
rgba(251,194,235,0.2)),
linear-gradient(to bottom,
rgba(255,154,158,0.2),
rgba(255,154,158,0.8),
rgba(250,208,196,0.8),
rgba(161,140,209,0.8),
rgba(251,194,235,0.8),
rgba(251,194,235,0.2));
background-origin: border-box;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
}

/* 表头特定渐变 */
.av__container .av__header {
border-bottom: 2px solid transparent;
background-image: linear-gradient(to right,
rgba(116,235,213,0.2),
rgba(116,235,213,0.8),
rgba(159,172,230,0.8),
rgba(159,172,230,0.2));
background-origin: border-box;
background-size: 100% 2px;
background-repeat: no-repeat;
}

/* 增强角落处的视觉效果 */
.av__container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at top left,
rgba(255,154,158,0.3),
transparent 20%
);
pointer-events: none;
z-index: 1;
}

.av__container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at bottom right,
rgba(251,194,235,0.3),
transparent 20%
);
pointer-events: none;
z-index: 1;
}
.av__container {
background: linear-gradient(135deg,
rgba(255,154,158,0.1) 0%,
rgba(250,208,196,0.1) 20%,
rgba(161,140,209,0.1) 50%,
rgba(251,194,235,0.1) 80%,
rgba(251,194,235,0.05) 100%);
background-attachment: local;
background-size: 100% 100%;
}

第二种

/* 为横线和竖线应用协调的渐变色 */
.av__container .av__first-row,
.av__container .av__row {
border-bottom: 1px solid;
border-image: linear-gradient(to right,
rgba(255,154,158,0.2),
rgba(255,154,158,0.8),
rgba(250,208,196,0.8),
rgba(161,140,209,0.8),
rgba(251,194,235,0.8),
rgba(251,194,235,0.2)) 1;
}

.av__container .av__cell {
border-right: 1px solid;
border-image: linear-gradient(to bottom,
rgba(255,154,158,0.2),
rgba(255,154,158,0.8),
rgba(250,208,196,0.8),
rgba(161,140,209,0.8),
rgba(251,194,235,0.8),
rgba(251,194,235,0.2)) 1;
}

.av__container .av__header {
border-bottom: 2px solid;
border-image: linear-gradient(to right,
rgba(116,235,213,0.2),
rgba(116,235,213,0.8),
rgba(159,172,230,0.8),
rgba(159,172,230,0.2)) 1;
}

/* 增强角落处的视觉效果 */
.av__container {
position: relative;
}

.av__container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at top left,
rgba(255,154,158,0.3),
transparent 20%
);
pointer-events: none;
z-index: 1;
}

.av__container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at bottom right,
rgba(251,194,235,0.3),
transparent 20%
);
pointer-events: none;
z-index: 1;
}

/* 移除最后一列的右边框，避免重叠 */
.av__cell:last-child {
border-right: none;
}

/* 移除最后一行的下边框 */
.av__row:last-child {
border-bottom: none;
}