Можете ли вы создать эту полосу с помощью только CSS?

Question

Могу ли я создать это с помощью css?

есть некоторые css box-shadow, которые я могу использовать для создания нижней границы, но как высоздать эффект на левой и правой сторонах?

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