查看“︁Template:展示卡片/styles.css”︁的源代码

/* ===== 展示卡片（Template:展示卡片/styles.css）===== */
.display-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	margin: 5px;
	padding: 12px 14px;
	border: 1px solid #D4E8C0;
	border-radius: 8px;
	background: linear-gradient(180deg, #F9FCF4, #F1F8E6);
	box-shadow: 0 1px 3px rgba(143, 188, 143, .25);
	transition: box-shadow .2s ease, transform .2s ease;
}

/* 顶部装饰条 */
.display-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 4px;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(90deg, #8FBC8F, #DCEFDC);
}

/* 悬停效果 */
.display-card:hover {
	box-shadow: 0 4px 14px rgba(143, 188, 143, .4);
	transform: translateY(-2px);
}

.display-card-head {
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid #8FBC8F;
	font-size: 1.1em;
	font-weight: bold;
	color: #2E6B45;
}

.display-card-head::before {
	content: "◆";
	margin-right: 6px;
	color: #8FBC8F;
	font-size: .75em;
}

.display-card-body {
	color: #333;
	font-size: .95em;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.display-card-body ul {
	margin: 0 0 0 1.2em;
	padding: 0;
}

.display-card-body p {
	margin: .3em 0;
}

.display-card-body .more-link {
	margin-top: 4px;
	text-align: right;
	font-size: .9em;
}

/* 强调样式 */
.display-card-accent {
	background: linear-gradient(180deg, #FFF8EF, #FDF2E3);
	border-color: #E8CFA8;
}

.display-card-accent::before {
	background: linear-gradient(90deg, #E8B96A, #F3D9AE);
}

.display-card-accent .display-card-head {
	border-bottom-color: #E8B96A;
	color: #8A5A1E;
}