Установите вставку и вложенную тень окна с помощью CSS

Свойство box-shadow имеет значение свойства inset, поэтому тень может быть вставкой или исходной.

Но как это возможно, чтобы установить как inset, так и outset shadow для div в CSS?

Ответы

Ответ 1

Вам нужно отделить их, используя ,

div {
    margin: 100px;
    height: 100px;
    width: 100px;
    border: 1px solid #aaa;
    border-radius: 50%;
    box-shadow: inset 0 0 5px tomato, 0 0 5px black;
}

Демо

Демо 2 (Ничего другого, но используется white border для лучшего показания)

Итак, здесь, в приведенном выше примере, он устанавливает теневую вставку с цветом tomato, а другой набор правил, разделенных с помощью запятой, для начала i.e black shadow

Ответ 2

Вам нужно использовать запятую для разделения обеих теней.

div{
    top: 100px;
    position: absolute;
    left: 100px;
    height: 100px;
    width: 100px;
    box-shadow: 10px 10px 10px grey, 0 0 10px black;
    border-radius: 5px;
    background: white;
}

Смотрите демонстрацию