css - 使用 CSS 设置 inset 和 outset box shadow

Question

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

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

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>

Demo

Demo 2 (没有什么不同，但是使用了 white border 以更好地指示)

所以在上面的例子中，它设置了阴影 inset 和 tomato 颜色，另一组用逗号分隔的规则是 outset 即 black 阴影