夾箱陰影看起來像我的例子

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