Как нарисовать реалистичную гладкую щелевую тень с Pure CSS3?

Ответ 1

Это самое близкое, что я мог бы получить: Демо. Я думаю, это действительно неплохо.

Он сочетает в себе черную тень и белый поверх нее.

.yourclass{
    background-color: #fff;
    box-shadow:  -15px 0px 60px 25px #ffffff inset, 
        5px 0px 10px -5px #000000 inset;
}

Сглаживание теней браузеров может отличаться. Я использую хром, чтобы вы могли tweek значения, чтобы получить визуальный эффект кросс-браузера...

Прочитайте статью статьи CSS Tricks о тенях теней, чтобы узнать, как они используются.

Для двух теней (с обеих сторон) вам нужно 4 тени (demo):

Результат:

.yourclass{
    background-color: #fff;
    box-shadow:  0px 100px 50px -40px #ffffff inset,
        0px -100px 50px -40px #ffffff inset,
        -5px 0px 10px -5px rgba(0,0,0,0.5) inset,
        5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}

Остерегайтесь, рендеринг/сглаживание теней браузеров может сильно различаться. Я использую хром, чтобы вы могли tweek значения, чтобы получить визуальный эффект кросс-браузера...

Подробнее о css-тенях читайте в этой статье из CSS-трюки

Ответ 2

То, что вы хотите, в основном является противоположностью теневой завитки страницы. Взгляните на этот учебник - вы должны легко его адаптировать.

Вот пример: jsFiddle

div {
    position: relative;
    width: 250px;
    height: 150px;
    margin: 100px auto;

    border: 1px solid black;
    background-color: white;
}

div:after {
    position: absolute;
    height: 80%;
    width: 10px;
    content: " ";
    right: 0px;
    top: 10%;
    background: transparent;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
    z-index: -1;
}

Вставляем псевдоэлемент, позиционируем его ниже нашего div и заставляем его бросать тень. Таким образом, вы контролируете высоту и положение теней.