CSS Box Shadow только снизу

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


css underline box-shadow
person WillingLearner    schedule 30.12.2010    source источник
comment
Попробуйте также этот метод, если у вас монохромный фон   -  person T30    schedule 01.08.2014

Ответы (4)


arrow_upward
979
arrow_downward

Сделай это:

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

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

person Steve B    schedule 05.06.2011
comment
Это, безусловно, лучший метод. Чистый css3, без хаков. - person thelastshadow; 04.11.2011
comment
На всякий случай, если кто-то хочет понять, почему это работает: * Первое значение устанавливает смещение по оси x источника света на 0. * Второе значение устанавливает смещение по оси y источника света на +4. * Третье значение устанавливает эффект размытия 2px. (Делает тень неравномерной). * Четвертое значение задает спред равным -2px. (Сократите тень на 2 пикселя.) Это приведет к тому, что тень будет на 4 пикселя меньше, чем затеняемый элемент, поэтому установите последнее значение на 0, если вы просто хотите простое подчеркивание. - person Ceasar Bautista; 25.07.2012
comment
У меня не работает под firefox 18.X. Что сработало для меня, так это: box-shadow: inset 0 -4px 3px black; Но это также создает небольшую тень по бокам.. :_( - person elboletaire; 01.02.2013
comment
однако это не работает для больших (20 пикселей и более) теней... :( - person Shimon S; 04.06.2013
comment
Подобно решению @elboletaire, это сработало для меня: box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.3); - person Danny Beckett; 01.10.2013
comment
Это более реалистичный пример тени только для левого или левого и правого: адаптированы под ваши нужды. - person Armel Larcier; 20.01.2014
comment
почему у первого числа нет px ? - person ahnbizcad; 14.05.2014
comment
@gwho - 0 равно 0, независимо от единиц измерения, поэтому добавление «px» излишне. Вы можете безопасно поставить «px» после нуля (или «pt», или «%», или любых допустимых единиц), если хотите. - person Mike Fitzpatrick; 16.06.2014
comment
так что выбор опустить один здесь и включить один был просто произвольным. приятно знать, спасибо! - person ahnbizcad; 16.06.2014
comment
При использовании этого в Firefox вокруг окна будет очень тонкая линия, которая получает тень. Вы можете исправить это, увеличив разброс до -3 пикселей вместо -2 пикселей, что, конечно, немного уменьшит нижнюю тень. - person Hendrik; 17.07.2014
comment
Эй, ОП, как насчет того, чтобы выбрать этот пост как принятый ответ? - person Andres SK; 24.02.2015
comment
@ahnbizcad Не совсем произвольно. 0 не нужен модуль. Следовательно, добавление модуля является излишним и приводит к пустой трате места. Поэтому предпочтительнее не добавлять единицу. Однако: я часто добавляю единицу для простого изменения значения в инспекторе объектов... Но это скорее функция отладки... Думаю, что большинство минификаторы отбрасывают юнит, если значение равно 0. - person Stijn de Witt; 28.07.2015
comment
Как насчет того, чтобы сделать это только для верхней, левой или правой сторон? Есть ли такие примеры? Или что, если вы хотите все, кроме топа? - person mmm; 11.08.2016
comment
как насчет внутренней тени? - person AmiNadimi; 20.03.2018
comment
слишком маленький. - person shinzou; 26.08.2018

arrow_upward
56
arrow_downward

Вы можете использовать два элемента, один внутри другого, и дать внешнему элементу 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/.

person Yi Jiang    schedule 30.12.2010
comment
Это фантастическое решение, если вам нужно показать тень для всего размера окна. - person JeanValjean; 24.08.2012
comment
Это решение, которое лучше соответствует требованиям вопроса. Он действительно охватывает всю нижнюю часть элемента. Хотя, по моему опыту, ответ, сделанный как правильный, отображает тень немного короче, чем дно. - person cbdeveloper; 26.07.2019

arrow_upward
26
arrow_downward

Попробуй это

-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/.

person Neri Barakat    schedule 14.08.2011
comment
У меня отлично работает с 20px 0 20px 20px - person Meloman; 31.01.2018

arrow_upward
11
arrow_downward

попробуйте это, чтобы полностью контролировать box-shadow.

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

это относится и к внешней тени блока.

person Saeed Tavoosi    schedule 03.12.2012
comment
Как получить размытие с помощью этой техники? - person Baldráni; 22.09.2015