CSS初级项目如何制作卡片阴影渐变_box-shadow与linear-gradient组合-css教程-PHP中文网

CSS初级项目如何制作卡片阴影渐变_box-shadow与linear-gradient组合

P粉602998670

发布： 2025-11-27 17:51:06

原创

500人浏览过

通过伪元素和linear-gradient模拟渐变阴影：卡片使用position: relative定位，::before伪元素设置渐变背景并模糊处理，形成彩色投影效果，配合border-radius、blur和opacity调整视觉表现，实现无需图片的高级CSS阴影卡片。

css初级项目如何制作卡片阴影渐变_box-shadow与linear-gradient组合

在CSS初级项目中，制作带有阴影渐变效果的卡片可以通过 box-shadow 与 linear-gradient 的巧妙组合来实现。虽然 box-shadow 本身不支持渐变色，但我们可以利用 background 使用 linear-gradient 来包裹元素，从而模拟出“渐变阴影”的视觉效果。

1. 理解基本原理

box-shadow 只能设置单一颜色的阴影，无法直接使用渐变。但我们可以通过以下方式绕过限制：

• 使用一个伪元素（如 ::before 或 ::after）作为背景层
• 在该层上应用 linear-gradient 背景
• 将伪元素定位在卡片下方，模拟扩散状的渐变阴影

2. HTML结构示例

一个简单的卡片结构如下：

<div class="card">
  <h3>卡片标题</h3>
  <p>这里是卡片内容。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1875">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6c50ec09de372.png" alt="Upscale">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1875">Upscale</a>
                            <p>AI图片放大工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Upscale">
                                <span>85</span>
                            </div>
                        </div>
                        <a href="/ai/1875" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Upscale">
                        </a>
                    </div>
                
</div>

登录后复制

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）影响阴影方向和色彩过渡