通过伪元素和linear-gradient模拟渐变阴影：卡片使用position: relative定位，::before伪元素设置渐变背景并模糊处理，形成彩色投影效果，配合border-radius、blur和opacity调整视觉表现，实现无需图片的高级CSS阴影卡片。
在CSS初级项目中，制作带有阴影渐变效果的卡片可以通过 box-shadow 与 linear-gradient 的巧妙组合来实现。虽然 box-shadow 本身不支持渐变色，但我们可以利用 background 使用 linear-gradient 来包裹元素，从而模拟出“渐变阴影”的视觉效果。
box-shadow 只能设置单一颜色的阴影，无法直接使用渐变。但我们可以通过以下方式绕过限制：
• 使用一个伪元素（如 ::before 或 ::after）作为背景层一个简单的卡片结构如下：
<div class="card"> <h3>卡片标题</h3> <p>这里是卡片内容。</p> </div>
通过伪元素和渐变背景模拟阴影：
立即学习“前端免费学习笔记（深入）”；
.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;
}你可以根据设计需求调整以下值：
• blur 数值越大，阴影越柔和基本上就这些。这种技巧在不使用图片的前提下，用纯CSS实现了类似“发光阴影”或“彩色投影”的高级视觉效果，适合用于登录卡片、产品展示或推荐模块。不复杂但容易忽略细节。
以上就是CSS初级项目如何制作卡片阴影渐变_box-shadow与linear-gradient组合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
121
收藏
