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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-27

浏览次数：次

返回列表

通过伪元素和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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/892">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679988742423.png" alt="语鲸">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/892">语鲸</a>
                            <p>AI智能阅读辅助工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="语鲸">
                                <span>314</span>
                            </div>
                        </div>
                        <a href="/ai/892" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="语鲸">
                        </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）影响阴影方向和色彩过渡