如何实现图片两侧半边渐变边框（附示例图）

需求 #

需要实现图片两侧半边的渐变边框效果，具体样式参考示例图：

现有代码 #

之前的实现代码如下：

CSS

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #000000;
}

.module-border-wrap {
  max-width: 320px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(130deg, rgba(248,253,254,1) 50%, rgba(33,186,227,1) 100%);
  padding: 6px;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
}

.module {
  background: #ffffff;
  color: #000000;
  padding: 2rem;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
}

.w-100{
  width:100%;
}
.p-0{
  padding:0;
}
.relative{
  position: relative;
}
.curved{
  border-radius: 30px 30px 0 30px;
}

HTML

<div class="module-border-wrap">
   <div class="module p-0 relative curved">
      <img src="https://picsum.photos/300/200" class="w-100 curved" alt="">
   </div>
</div>

当前问题 #

目前已实现渐变效果，但渐变显示在图片外部，而示例图中的渐变边框是覆盖在图片本身的，需要调整代码达成目标效果。

修改后的解决方案 #

通过调整容器结构，利用伪元素实现覆盖在图片上的渐变边框：

最终CSS

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #000000;
}

.module {
  position: relative;
  max-width: 320px;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
  overflow: hidden;
}

.module::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(130deg, 
    rgba(248,253,254,0) 47%, 
    rgba(33,186,227,1) 50%, 
    rgba(33,186,227,1) 53%, 
    rgba(248,253,254,0) 56%);
  pointer-events: none;
  border: 6px solid transparent;
  border-radius: inherit;
  box-sizing: border-box;
}

.w-100{
  width:100%;
}
.curved{
  border-radius: 1.5rem 1.5rem 0 1.5rem;
}

最终HTML

<div class="module">
  <img src="https://picsum.photos/300/200" class="w-100 curved" alt="">
</div>

关键修改说明 #

• 移除外层module-border-wrap容器，通过.module的伪元素直接在图片上方实现渐变效果
• 调整渐变的颜色节点与透明度，让中间区域显示渐变边框，两侧保持透明，贴合示例样式
• 设置overflow: hidden确保容器圆角能正确裁剪内部元素
• 添加pointer-events: none避免伪元素遮挡图片的交互事件

内容的提问来源于stack exchange，提问作者Aayush Dahal