gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:12:48 24 4
gpt4 key购买 nike

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

enter image description here enter image description here目前我的看起来像下图

enter image description here

有没有一种方法可以让 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

最佳答案

您可以将 box-shadow 放在 .slider-track-high 类上,而不是放在 slider-handle 上,就像这样-

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

关于html - 剪辑 box-shadow 看起来像我的例子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36910396/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com