剪辑框阴影看起来像我的例子

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>

滑块手柄是我试图在

上实现效果的盒子阴影的部分

我当前努力的代码框

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

Answer 1

您可以将box-shadow放在.slider-track-high类上，而不是将它放在滑块处理上，而不是像这样 -

$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;
        }
    }
}