元素

Question

我正在寻找一个多组件日期选择器，就像下图中的那个，但在Github或其他地方没有找到任何东西。

所以我决定做一个。我在实现CSS时遇到了问题，它在顶部和底部淡出。

我考虑过在容器中使用:before和:after，但没有成功。我可以在:before和:after

中应用渐变

例如：

ol {
    overflow: hidden;
    width: 8em;
    height: 6em;
    text-align: center;
    border: 0.5em solid black;
    border-radius: 0.5em;
    padding: 0px;
}

li {
    margin: 0px;
    list-style: none;
    padding: 0.5em 0;
    line-height: 1em;
    border: 1px solid #ccf;
}

<ol>
    <li>2010</li>
    <li>2011</li>
    <li>2012</li>
    <li>2013</li>
    <li>2014</li>
    <li>2015</li>
    <li>2016</li>
    <li>2017</li>
    <li>2018</li>
    <li>2019</li>
    <li>2020</li>
</ol>

如何在顶部和底部制作阴影？

Answer 1

尝试这样的事情：

var CurrItem = document.querySelector('input[value="Insane 4"]').click();
SetTimeout(function(){CurrItem.Click();,10000}

您喜欢<div class="date-picker"> <ol> <li>2010</li> ... </ol> <div class="shadow"></div> </div> 样式（设置宽度和高度），以及以下CSS：

date-picker

这会创建一个位于.date-picker { position: relative; width: 8em; height: 6em; border: 0.5em solid black; border-radius: 0.5em; } ol { position: absolute; overflow: hidden; width: 100%; height: 100%; text-align: center; margin: 0; padding: 0; } li { margin: 0px; list-style: none; padding: 0.5em 0; line-height: 1em; border: 1px solid #ccf; } .shadow { position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.2), transparent, transparent, rgba(0, 0, 0, 0.2)); } 前面的渐变图像叠加层，它是图像的兄弟。请注意，ol的z-index必须大于.shadow的z-index。

编辑：仔细观察您发布的图像，渐变似乎更接近二次而非线性。如果你希望列表看起来更圆润，在photoshop或其他东西中制作非线性渐变会使它看起来更加三维。

Answer 2

是的，您可以在:before和:after元素中应用渐变。

示例：

ol {
    overflow: hidden;
    width: 8em;
    height: 6em;
    position: relative;
    text-align: center;
    border: 0.5em solid black;
    border-radius: 0.5em;
    padding: 0px;
}

ol:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom : 80%;
    content: "";
    background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
    z-index: -1;
    pointer-events: none;
}

ol:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    bottom : 0;
    content: "";
    background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
    z-index: -1;
    pointer-events: none;
}

li {
    margin: 0px;
    list-style: none;
    padding: 0.5em 0;
    line-height: 1em;
    border: 1px solid #ccf;
}

Answer 3

好的，通过使用不在:before / :after上的渐变而是在与position: absolute;一起浮动的新div中得到它，如：

.fader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 9em;
    background: linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}

和HTML：

<div class="date-picker">
    <ol>
        <li>2010</li>
        <li>2011</li>
        ...
    </ol>
    <div class="fader"></div>
</div>

jsFiddle：https://jsfiddle.net/bo7dyx83/