通用卡片容器样式记录
作者: iTxGo ▫️
4个月前发布 ▫️
8天前更新 ▫️
分类: 笔记 ▫️
浏览: 127 ▫️
容器样式代码迭代记录
主体容器 阴影 版 1
/* ==========================================
通用卡片容器
========================================== */
.header-container,
.footer-container,
.sidebar-container,
.article-container {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
padding: 0;
border: 1px solid var(--color-border);
margin: var(--spacing-lg) auto;
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
box-shadow: 0 0 0 11px #f5f5f5,
0 0 0 13px #fff,
0 3px 15px 4px rgba(0, 0, 0, 0.5);
transform: translateZ(0);
}
/* ==========================================
卡片容器六边形纹理背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before,
.user-dropdown::before,
.modal-content::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--radius-lg);
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='34.64'%3E%3Cg stroke='%23000' stroke-width='1.1' stroke-opacity='0.1'%3E%3Cline x1='30.0' y1='34.64' x2='10.0' y2='34.64'%2F%3E%3Cline x1='10.0' y1='34.64' x2='0.0' y2='17.32'%2F%3E%3Cline x1='0.0' y1='17.32' x2='10.0' y2='0.0'%2F%3E%3Cline x1='10.0' y1='0.0' x2='30.0' y2='0.0'%2F%3E%3Cline x1='70.0' y1='0.0' x2='60.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='40.0' y2='17.32'%2F%3E%3Cline x1='40.0' y1='17.32' x2='30.0' y2='0.0'%2F%3E%3Cline x1='30.0' y1='34.64' x2='40.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='70.0' y2='34.64'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 60px 34.64px;
background-repeat: repeat;
}
/* ==========================================
卡片容器通用防溢出样式
========================================== */
.article-content,
.comment-content,
.sidebar-comments .comment-item,
.article-excerpt,
.article-list {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
主体容器 伪元素阴影（🐞 缝隙/露白）版 2
/* ==========================================
通用卡片容器
========================================== */
.header-container,
.footer-container,
.sidebar-container,
.article-container {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
padding: 0;
border: 1px solid var(--color-border);
margin: var(--spacing-lg) auto;
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
box-shadow: none;
transform: translateZ(0);
}
/* ==========================================
卡片容器六边形纹理背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before,
.user-dropdown::before,
.modal-content::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--radius-lg);
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='34.64'%3E%3Cg stroke='%23000' stroke-width='1.1' stroke-opacity='0.1'%3E%3Cline x1='30.0' y1='34.64' x2='10.0' y2='34.64'%2F%3E%3Cline x1='10.0' y1='34.64' x2='0.0' y2='17.32'%2F%3E%3Cline x1='0.0' y1='17.32' x2='10.0' y2='0.0'%2F%3E%3Cline x1='10.0' y1='0.0' x2='30.0' y2='0.0'%2F%3E%3Cline x1='70.0' y1='0.0' x2='60.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='40.0' y2='17.32'%2F%3E%3Cline x1='40.0' y1='17.32' x2='30.0' y2='0.0'%2F%3E%3Cline x1='30.0' y1='34.64' x2='40.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='70.0' y2='34.64'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 60px 34.64px;
background-repeat: repeat;
}
/* 卡片容器伪元素承载三层重度阴影 实现渲染隔离 */
.header-container::after,
.footer-container::after,
.sidebar-container::after,
.article-container::after {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
border-radius: var(--radius-lg);
box-shadow: 0 0 0 11px #f5f5f5, 0 0 0 13px #fff,
0 3px 15px 4px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
/* ==========================================
卡片容器通用防溢出样式
========================================== */
.article-content,
.comment-content,
.sidebar-comments .comment-item,
.article-excerpt,
.article-list {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
👉 主体容器 伪元素边框+阴影 版 3 √
/* ==========================================
1. 通用卡片容器
========================================== */
.header-container,
.footer-container,
.sidebar-container,
.article-container {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
padding: 1px; /* 防子元素遮挡底层 border */
border: none; /* border 移至 ::after，与阴影同层渲染 */
margin: var(--spacing-lg) auto;
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
isolation: isolate; /* 精准建立层叠上下文，替代 transform: translateZ(0) */
}
/* ==========================================
2. 六边形纹理背景（::before）
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before,
.user-dropdown::before,
.modal-content::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--radius-lg);
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='34.64'%3E%3Cg stroke='%23000' stroke-width='1.1' stroke-opacity='0.1'%3E%3Cline x1='30.0' y1='34.64' x2='10.0' y2='34.64'%2F%3E%3Cline x1='10.0' y1='34.64' x2='0.0' y2='17.32'%2F%3E%3Cline x1='0.0' y1='17.32' x2='10.0' y2='0.0'%2F%3E%3Cline x1='10.0' y1='0.0' x2='30.0' y2='0.0'%2F%3E%3Cline x1='70.0' y1='0.0' x2='60.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='40.0' y2='17.32'%2F%3E%3Cline x1='40.0' y1='17.32' x2='30.0' y2='0.0'%2F%3E%3Cline x1='30.0' y1='34.64' x2='40.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='70.0' y2='34.64'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 60px 34.64px;
background-repeat: repeat;
}
/* ==========================================
3. border + 三层阴影（::after）
========================================== */
.header-container::after,
.footer-container::after,
.sidebar-container::after,
.article-container::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--radius-lg);
pointer-events: none;
box-sizing: border-box;
border: 1px solid var(--color-border);
box-shadow:
0 0 0 11px #f5f5f5,
0 0 0 13px #fff,
0 3px 15px 4px rgba(0, 0, 0, 0.5);
will-change: transform; /* 重度三层阴影提升为独立 GPU 合成层 */
}
/* ==========================================
4. 防溢出
========================================== */
.article-content,
.comment-content,
.sidebar-comments .comment-item,
.article-excerpt,
.article-list {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
⭐低性能设备兼容版
1. claude 优化版 √
/* ==========================================
通用卡片容器 - claude优化版 √
========================================== */
.header-container,
.footer-container,
.sidebar-container,
.article-container {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
padding: 0;
border: 2px solid var(--color-border);
margin: var(--spacing-lg) auto;
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
box-shadow: none;
transform: translateZ(0);
}
/* 伪元素承载阴影 渲染隔离 */
.header-container::after,
.footer-container::after,
.sidebar-container::after,
.article-container::after {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
border-radius: var(--radius-lg);
box-shadow: 0 0 0 11px #f5f5f5, 0 0 0 13px #fff, 0 3px 15px 4px rgba(0,0,0,0.5);
pointer-events: none;
}
2. chat.z.ai 优化版
/* ==========================================
通用卡片容器 - chat.z.ai优化版
========================================== */
.header-container,
.footer-container,
.sidebar-container,
.article-container {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
padding: 0;
border: 3px solid var(--color-border);
margin: var(--spacing-lg) auto;
will-change: transform;
transform: translate3d(0, 0, 0);
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
box-shadow: none;
}
/* 伪元素承载阴影 渲染隔离 */
.header-container::after,
.footer-container::after,
.sidebar-container::after,
.article-container::after {
content: "";
position: absolute;
inset: -2px;
z-index: -1;
border-radius: inherit;
box-shadow: 0 0 0 11px #f5f5f5, 0 0 0 13px #fff, 0 3px 15px 4px rgba(0,0,0,0.5);
pointer-events: none;
}
🚀高性能设备版
1. 原版 √
:root {
--shadow-card: 0 0 0 11px #f5f5f5, 0 0 0 13px #fff, 0 4px 22px rgba(0,0,0,0.6);
}
/* ==========================================
通用卡片容器 - 原版 √
========================================== */
.header-container,
.footer-container,
.sidebar-container,
.article-container {
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
padding: 0;
border: 2px solid var(--color-border);
box-shadow: var(--shadow-card);
margin: var(--spacing-lg) auto;
word-wrap: break-word;
overflow-wrap: break-word;
}
2. 原版 优化极简版
/* ==========================================
通用卡片容器 - 原版 优化极简版
========================================== */
.header-container,
.footer-container,
.sidebar-container,
.article-container {
border: 2px solid var(--color-border);
outline: 11px solid #f5f5f5;
box-shadow: 0 0 0 2px #fff, 0 4px 15px rgba(0,0,0,0.4);
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
margin: var(--spacing-lg) auto;
will-change: transform;
transform: translate3d(0, 0, 0);
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
}