CSS Box Shadow Bottom Only

261

Как мне это сделать? Я хочу, чтобы мой элемент выглядел так, как будто у него есть тени. Я не хочу тень для других трех сторон.

  • 1
    Попробуйте также этот метод, если у вас есть монохроматический фон
Теги:
box-shadow
underline

4 ответа

523
Лучший ответ

Сделайте это:

box-shadow: 0 4px 2px -2px gray;

его на самом деле намного проще, что бы вы установили размытие (3-е значение), установите разброс (4-е значение) на отрицательный результат.

Поделиться
  • 7
    Это, безусловно, лучший метод. Чистый css3, без хаков.
  • 151
    На всякий случай, если кто-то захочет понять, почему это работает: * Первое значение устанавливает смещение по оси x источника света на 0. * Второе значение устанавливает смещение по оси y источника света на +4. * Третье значение устанавливает эффект размытия в 2 пикселя. (Делает тень неоднородной). * Четвертое значение устанавливает спред на -2px. (Сократите тень на 2 пикселя.) Это приведет к тому, что тень будет на 4 пикселя меньше ширины затененного элемента, поэтому установите последнее значение равным 0, если вы хотите просто подчеркнуть подчеркивание.
Показать ещё 13 комментариев
42

Вы можете использовать два элемента, один внутри другого, и дать внешний overflow: hidden и ширину, равную внутреннему элементу вместе с нижним дополнением, чтобы тень на всех остальных сторонах была "обрезана" 

#outer {
    width: 100px;
    overflow: hidden;
    padding-bottom: 10px;
}

#outer > div {
    width: 100px;
    height: 100px;
    background: orange;

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

В качестве альтернативы, плавайте внешний элемент, чтобы заставить его сжиматься до размера внутреннего элемента. См.: http://jsfiddle.net/QJPd5/1/

Поделиться
  • 0
    Это решение является фантастическим, если вам нужно показать тень для всех размеров окна.
18

Попробуйте это

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

Вы можете увидеть его в http://jsfiddle.net/wJ7qp/

Поделиться
  • 2
    Работает нормально для меня с 20px 0 20px 20px
7

попробуйте сделать это, чтобы получить тень под вашим полным контролем.

    <html>

    <head>
        <style> 
            div {
                width:300px;
                height:100px;
                background-color:yellow;
                box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
           }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

    </html>

это применимо и к внешней теневой коробке.

Поделиться
  • 0
    Как получить размытие с помощью этой техники?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню