WordPress归档页Bricks Builder实现3D阴影效果卡片求助

一、核心CSS调整（解决倾斜方向+3D阴影） #

先给卡片容器添加自定义CSS类archive-card（Bricks操作：选中卡片容器→高级选项→CSS类），然后在全局/页面自定义CSS面板中添加以下代码：

/* 卡片基础样式 */
.archive-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-radius: 8px; /* 按需匹配设计图圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 基础层阴影，增强立体感 */
}

/* 底部倾斜伪元素（修正方向问题） */
.archive-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px; /* 倾斜区域高度，按需调整 */
  background: #ffffff; /* 和卡片背景保持一致 */
  transform: skewY(-2deg); /* 正负值控制倾斜方向：-2deg为底部向外翘，2deg为向内收 */
  transform-origin: left bottom; /* 固定变换原点，避免整体偏移 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 给倾斜区域加阴影，强化3D效果 */
  z-index: -1; /* 放到卡片后方，不遮挡内部元素 */
}

/* 内部绝对定位图标层级控制 */
.archive-card .card-icon {
  position: absolute;
  z-index: 10; /* 确保图标在最上层，不会被伪元素或其他内容遮挡 */
}

/* 图片自适应处理 */
.archive-card .card-image {
  width: 100%;
  height: auto;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

二、规范与移动端适配注意事项 #

1. 代码规范：

   • 始终使用自定义CSS类而非内联样式，Bricks中统一管理CSS，避免样式冲突。
   • 采用::after（CSS3标准写法）替代老式的:after，兼容现代浏览器且更规范。
   • 内部元素优先用Flex布局（比如标题+分类日期容器），减少不必要的position:absolute，降低布局复杂度。

2. 移动端适配：

   • 添加媒体查询调整倾斜高度和阴影，避免移动端倾斜过度：

     @media (max-width: 768px) {
       .archive-card::after {
         height: 15px;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
       }
       .archive-card {
         margin: 0 10px; /* 避免卡片贴边，提升移动端视觉体验 */
       }
     }
     

   • 给卡片容器设置max-width: 100%，确保不会超出屏幕宽度。
   • 图片用object-fit: cover保证在不同屏幕尺寸下比例正常，不会变形。

三、调试技巧 #

如果倾斜方向仍不符合预期，直接修改transform: skewY()的正负值：

• 想要底部向外翘（上边缘倾斜）：使用skewY(-2deg)
• 想要底部向内收（下边缘倾斜）：使用skewY(2deg)
• 调整transform-origin可以改变倾斜中心点，比如设为center bottom会让左右对称倾斜。

内容的提问来源于stack exchange，提问作者Vasco