使用 CSS 设置插入和起始框阴影

Set both inset and outset box shadow using CSS

提问by Iter Ator

The box-shadowproperty has a property value called inset, so the shadow can be inset, or outset.

该box-shadow属性有一个名为 的属性值inset，因此阴影可以是inset或outset。

But how is it possible, to set both inset, and outsetshadow for a divin CSS?

但是如何在 CSS 中为 a设置inset和outset阴影div呢？

回答by Mr. Alien

You need to separate them using a ,

您需要使用 a 将它们分开 ,

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

Demo

Demo

Demo 2(Nothing different, but used whiteborderfor better indication)

Demo 2（没有什么不同，但用于whiteborder更好的指示）

So here in the above example, it sets the shadow insetwith the tomatocolor, and the other set of rules separated using a comma is for outseti.e blackshadow

所以在上面的例子中，它用颜色设置阴影插入，tomato使用逗号分隔的另一组规则用于开始，即black阴影

回答by newTag

You need to use comma to separate both shadows.

您需要使用逗号分隔两个阴影。

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

See demo

看演示