iTxGo🍃 - xBlog™️

通用卡片容器样式记录

⭐低性能设备兼容版

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;
}