夹箱阴影看起来像我的例子

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> 

滑盖手柄与盒子阴影我想实现对

影响的部分

我目前努力的代码bin

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