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

Question

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

但是如何为CSS中的div设置插入和开始阴影怎么可能呢？

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

Demo

Demo 2 （没有什么不同，但使用white border来获得更好的指示）

所以在上面的示例中，它使用tomato颜色设置阴影 inset ，使用逗号分隔的另一组规则用于 outset ie black shadow

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

See demo