你能用CSS创建这个褪色条吗？

Question

我可以使用css创建吗？

我可以使用一些盒子阴影css来创建底部边框，但是如何在左右两侧创建效果呢？

Answer 1

是的，您可以：https://jsfiddle.net/0mro5t77/

诀窍是使用外部和内部容器。外部容器为条形图和框阴影提供白色背景。内部容器具有渐变＆＃34;页面背景颜色 - ＆gt;透明的 - ＆gt;页面背景颜色＆＃34;并且绝对定位，因此它与外部容器重叠以产生褪色效果。

html, body {
    background: #ccc;
}
.outer {
    box-shadow: 0 -20px 20px -20px #333, 0 20px 20px -20px #333;
    background: #fff;
    width: 600px;
    height: 50px;
    margin: 0 auto;
}
.inner {
    width: 600px;
    height: 100px;
    background: linear-gradient(to right, #ccc 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #ccc 100%);
    position: absolute;
    margin-top: -25px;
    text-align: center;
    padding-top: 30px;
}