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

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

Answer 2

好的，不是在:before / :after 上使用渐变，而是在一个新的 div 中使用 position: absolute; 浮动，例如：

.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/

Answer 3

试试这样的：

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

date-picker 的样式随你喜欢（设置宽度和高度），以及以下 CSS：

.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 前面。请记住，.shadow 的 z-index 需要大于 ol 的 z-index。

编辑：仔细查看您发布的图像，渐变似乎更接近二次而不是线性。如果您希望列表看起来更圆润，在 Photoshop 中制作非线性渐变或其他东西会使其看起来更加立体。