为什么当前场景下box-shadow淡出不生效？如何实现阴影渐变效果？

问题原因 #

• box-shadow 本身仅支持固定色值填充，不支持渐变效果，你当前代码中设置的多层蓝色阴影都是固定色值，因此无法和背景的线性渐变同步实现从左到右的淡出效果。

实现方案 #

改用 background-clip 组合多层背景实现渐变边框效果，同时保留原有的圆角样式，修改后的完整代码如下：

HTML 代码 #

<div class="progress">
    <div class="border-right"></div>
    <div class="bar-base"></div>
</div>

CSS 代码 #

$height: 28px;
$padding-top: 2px;
$padding-left: 10px;
$border-width: 5px; // 对应原box-shadow的总宽度

.progress {
  position: relative;
  display: block;
  height: $height;
}
.border-right {
  position: absolute;
  right: 0px;
  left: 30px;
  top: 0px;
  height: $height;
}

.bar-base {
  position: absolute;
  top: $padding-top;
  bottom: $padding-top;
  left: $padding-left;
  right: $padding-left;
  height: ($height - $padding-top*5);
  border-radius:10px;     
  // 移除原固定色box-shadow，改用多层背景实现渐变边框
  padding: $border-width;
  background: 
    linear-gradient(to right,#BF0882  10%, white 80%) content-box, // 内部进度条背景
    linear-gradient(to right, blue, #fff) border-box; // 渐变边框背景
  background-clip: content-box, border-box;
  border: 1px solid transparent;
  width: 200px;
  height: 20px;
}

方案说明 #

• 第一层背景设置 content-box，仅作用于元素内容区域，对应原来的进度条渐变效果
• 第二层背景设置 border-box，作用于边框区域，通过自定义的线性渐变实现边框从左到右蓝色到白色的过渡效果
• 通过 padding 控制边框的宽度，和你原本的box-shadow视觉宽度保持一致

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