css - 你能只使用 CSS 创建这个渐变条吗？

Question

我可以使用 css 创建这个吗？

我可以使用一些 box-shadow css 来创建底部边框，但是如何在左侧和右侧创建效果？

Answer 1

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

诀窍是使用外部容器和内部容器。外部容器为条形图和框阴影提供白色背景。内部容器具有渐变“页面背景颜色 -> 透明 -> 页面背景颜色”，并且绝对定位，因此它与外部容器重叠以创建淡入淡出效果。

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