通过伪元素和linear-gradient模拟渐变阴影：卡片使用position: relative定位，::before伪元素设置渐变背景并模糊处理，形成彩色投影效果，配合border-radius、blur和opacity调整视觉表现，实现无需图片的高级CSS阴影卡片。
在CSS初级项目中，制作带有阴影渐变效果的卡片可以通过 box-shadow 与 linear-gradient 的巧妙组合来实现。虽然 box-shadow 本身不支持渐变色，但我们可以利用 background 使用 linear-gradient 来包裹元素，从而模拟出“渐变阴影”的视觉效果。
1. 理解基本原理
box-shadow 只能设置单一颜色的阴影，无法直接使用渐变。但我们可以通过以下方式绕过限制：
• 使用一个伪元素（如 ::before 或 ::after）作为背景层• 在该层上应用 linear-gradient 背景
• 将伪元素定位在卡片下方，模拟扩散状的渐变阴影
2. HTML结构示例
一个简单的卡片结构如下：
3. CSS实现渐变阴影效果
通过伪元素和渐变背景模拟阴影：
.card {
position: relative;
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 12px;
z-index: 1;
}
.card::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
background: linear-gradient(45deg, #ff6b6b, #519bd8);
border-radius: 16px;
z-index: -1;
filter: blur(10px);
opacity: 0.7;
}
• position: relative 让伪元素可以相对于卡片定位• ::before 创建一层渐变背景
• filter: blur() 模拟阴影的模糊感
• opacity 控制阴影透明度，更自然
• 渐变角度（如 45deg）影响阴影方向和色彩过渡
4. 调整参数获得理想效果
你可以根据设计需求调整以下值：
• blur 数值越大，阴影越柔和• 伪元素的 top/left 控制阴影偏移方向
• 渐变颜色可换成紫色到蓝色、橙色到红色等
• 配合 transform: scale() 可控制阴影大小
基本上就这些。这种技巧在不使用图片的前提下，用纯CSS实现了类似“发光阴影”或“彩色投影”的高级视觉效果，适合用于登录卡片、产品展示或推荐模块。不复杂但容易忽略细节。
