html - 元素顶部和底部的阴影/渐变

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

是的，您可以在 :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;
}