剪辑 box-shadow 看起来像我的例子

Question

我想知道如何复制下面的图像

目前我的看起来像下图

有没有办法可以将 box-shadow 剪裁成留在条形边界内，或者以其他方式完全达到这种效果？

这是我的css：

.slider.slider-horizontal {
  width: 100%;
}
.slider.slider-horizontal .slider-track {
  height: 13px;
}
.slider.slider-horizontal .slider-track .slider-track-high {
  background-color: grey;
  background-image: none;
  box-shadow: none;
  border-radius: 20px;
}
.slider.slider-horizontal .slider-track .slider-handle {
  background-color: blue;
  background-image: none;
  box-shadow: none;
  margin-top: -4px;
}
.slider.slider-horizontal .slider-track .slider-selection {
  border-radius: 20px;
  background-image: none;
  box-shadow: none;
  background-color: blue;
}

下面是我的标记：

<div class="slider slider-horizontal" id="">
    <div class="slider-track">
        <div class="slider-track-low"></div>
        <div class="slider-selection"></div>
        <div class="slider-track-high"></div>
        <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="100000" aria-valuenow="3" tabindex="0"></div>
        <div class="slider-handle max-slider-handle round hide" role="slider" aria-valuemin="0" aria-valuemax="100000" aria-valuenow="0" tabindex="0"></div>
     </div>
</div>

slider-handle 是我想要实现效果的带框阴影的部分

我目前努力的代码库

http://codepen.io/Kieranmv95/pen/ZWqBVP

Answer 1

您可以将 box-shadow 放在 .slider-track-high class 上，而不是将其放在滑块手柄上，就像这样-

$blueButton:                  #06aeff;
$grey:                        #B3B0BD;

.slider.slider-horizontal {
    width: 100%;
    .slider-track {
        height: 13px;
        .slider-track-high {
            background-color: $grey;
            background-image: none;
            box-shadow: -12px 0 0px #222;
            border-radius: 20px;
        }
        .slider-handle {
            background-color: $blueButton;
            background-image: none;
//            box-shadow: -2px 2px 0px black;
            margin-top: -4px;
        }
        .slider-selection {
            border-radius: 20px;
            background-image: none;
            box-shadow: none;
            background-color: $blueButton;
        }
    }
}

剪辑 box-shadow 看起来像我的例子

Clip box-shadow to look like my example

html

css

box-shadow