Как я могу добавить box-shadow на одну сторону элемента? - PullRequest
Новая
       67

Как я могу добавить box-shadow на одну сторону элемента?

407 голосов
/ 25 февраля 2011

Мне нужно создать тень блока на каком-то элементе block, но только (например) на его правой стороне. Я делаю это, оборачивая внутренний элемент с помощью box-shadow во внешний с padding-right и overflow:hidden;, чтобы три другие стороны тени не были видны.

Есть ли лучший способ добиться этого? Как box-shadow-right?

РЕДАКТИРОВАТЬ : Мои намерения - создать только вертикальную часть тени. Точно так же, как и repeat-y правила background:url(shadow.png) 100% 0% repeat-y.

Ответы [ 11 ]

0 голосов
/ 22 ноября 2013

Этот сайт помог мне: https://gist.github.com/ocean90/1268328 (Обратите внимание, что на этом сайте левая и правая перепутаны на дату этого сообщения ... но они работают, как ожидалось). Они исправлены в коде ниже. 

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>
Страница:
...