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

Question

该box-shadow属性具有一个名为的属性值inset,因此阴影可以插入或开始.

但是如何设置CSS中的嵌入和开始阴影div呢？

Answer 1

你需要使用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 2 (没有什么不同,但用于white border更好的指示)

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

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

见演示