如何为Div左右边缘添加带透明渐变的Inset Box Shadow？

嘿，我来帮你搞定这个左右边缘渐隐的内阴影效果！你现在的代码实现的是上下方向的内阴影，要改成左右边缘的渐隐效果，有两种简单的方法可以实现，我给你详细说说：

方法一：调整Box-Shadow参数实现渐隐内阴影 #

这种方法是在你现有代码的基础上修改，通过调整box-shadow的偏移量、模糊半径和扩展半径，来模拟自然的渐隐效果：

.container {
  height: 300px;
  width: 300px;
  background-color: #ffffff; /* 添加背景色更易观察效果，可替换为你需要的颜色 */
  box-shadow: 
    inset 15px 0 15px -15px rgba(178, 169, 169, 0.8), /* 左侧渐隐内阴影 */
    inset -15px 0 15px -15px rgba(178, 169, 169, 0.8); /* 右侧渐隐内阴影 */
}

参数小解释： #

• inset：标记这是内阴影，而非外阴影
• 15px 0：水平方向偏移15px（左侧阴影），垂直方向无偏移
• 15px：模糊半径，控制阴影的模糊柔和程度
• -15px：负的扩展半径会让阴影向内收缩，刚好和模糊半径配合，形成从边缘向内渐隐的过渡
• rgba(178, 169, 169, 0.8)：阴影颜色和透明度，调整透明度可以控制渐隐的深浅

方法二：使用线性渐变背景模拟渐隐效果 #

如果你想要更精确控制渐隐的过渡范围，用线性渐变背景会更灵活，能自定义渐变的起始和结束位置：

.container {
  height: 300px;
  width: 300px;
  background: 
    /* 左右渐隐渐变层 */
    linear-gradient(to right, 
      rgba(178, 169, 169, 0.3), /* 左侧起始颜色（带透明度） */
      transparent 15px, /* 从15px位置开始完全透明 */
      transparent 85%, /* 到85%位置开始变回阴影色 */
      rgba(178, 169, 169, 0.3) /* 右侧结束颜色（带透明度） */
    ),
    /* 容器基础背景色，替换为你需要的颜色 */
    #ffffff;
}

调整小技巧： #

• 修改15px和85%的值可以控制渐隐区域的宽度
• 调整rgba中的透明度（最后一个值）可以控制渐隐的深浅
• 如果需要更自然的过渡，可以增加更多渐变颜色节点

完整测试代码 #

你可以直接复制下面的代码来测试效果：

<div class="container"></div>

.container {
  height: 300px;
  width: 300px;
  background-color: #ffffff;
  box-shadow: 
    inset 15px 0 15px -15px rgba(178, 169, 169, 0.8),
    inset -15px 0 15px -15px rgba(178, 169, 169, 0.8);
}

你可以根据自己的需求调整参数，比如加大模糊半径让渐隐更柔和，或者调整颜色透明度让阴影更淡～

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