如何使用CSS实现一半图片露出在外部的卡片效果

实现这种图片突出卡片的效果核心原理很简单，用负外边距即可完成，不需要复杂属性：

1. 基础HTML结构 #

<div class="card">
  <img src="你的图片路径" alt="卡片图片" class="card-cover">
  <div class="card-body">
    <h3>卡片标题</h3>
    <p>这里是卡片的正文内容，支持自定义排版</p>
    <button>操作按钮</button>
  </div>
</div>

2. 核心CSS代码 #

/* 卡片容器基础样式 */
.card {
  width: 320px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* 注意：容器不要加 overflow: hidden，否则超出部分会被裁剪 */
}

/* 突出显示的图片样式 */
.card-cover {
  width: 90%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  /* 核心：负上外边距让图片向上偏移，露出在卡片外部 */
  margin: -40px auto 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

补充说明 #

如果需要向其他方向突出，只需要修改对应方向的负边距即可：比如想让图片向右突出，设置margin-right: -20px即可；也可以用transform: translateY(-40px)替代负边距实现位移效果，最终呈现效果一致。

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