CSS Box Box только дно [дублирует

StackOverflow https://stackoverflow.com/questions/4561097

  •  14-10-2019
  •  | 
  •  

Вопрос

Этот вопрос уже имеет ответ здесь:

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

Это было полезно?

Решение

Сделай это: 

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

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

Другие советы

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

Попробуй это 

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

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

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

Это также будет относиться к внешней коробке.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top