使用CSS设置内阴影和外阴影的盒子阴影

Question

box-shadow属性有一个叫做inset的属性值，因此阴影可以是“内嵌”的（即元素内部的阴影），也可以是“外突”的（即元素外部的阴影）。

但是在CSS中如何同时设置div的内嵌和外突阴影呢？

- Iter Ator

---

需要注意的是，outset并没有这样的值。要么指定inset，要么默认为外部样式的阴影。例如，以下声明仍然会产生inset的外观：box-shadow: inset 8px 8px; box-shadow: outset 8px 8px;，因为outset是无效的。相反，必须使用box-shadow: 8px 8px;（省略inset）。box-shadow必须完全重新定义，因为没有专门的属性来定义仅内嵌/外嵌的外观。 - undefined

Answer 1

您需要使用,分隔它们。

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

<div></div>

演示

演示 2 （没有区别，但使用了white边框以更好地表示）

在上面的例子中，它设置了带有tomato颜色的内阴影，并且使用逗号分隔的另一组规则是用于外阴影即outset，也就是black阴影。

- Mr. Alien

---

但是如果您想通过一个类应用内阴影，而通过另一个类应用外阴影呢？如果我使用两个不同的类，一个用于内阴影，另一个用于外阴影，第二个类将覆盖第一个类。 - Omar Ruder

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

查看演示

- newTag