inset box-shadow - 相同的边和底部，顶部没有可见阴影

Question

如何制作这样的盒子阴影？:

侧面和底部相同，顶部为 1px border，没有可见阴影。

Answer 1

我这样做：

div {
  box-shadow: 
  inset 0px -10px 4px -10px rgba(0, 0, 0, 0.6), 
  inset 10px 0px 4px -10px rgba(0, 0, 0, 0.6), 
  inset -10px 0px 4px -10px rgba(0, 0, 0, 0.6);
  background-color: white;
  border-top: 1px solid #bebebe;
  border-radius: 0 0 6px 6px;
  padding: 5px;
  width: 130px;
  text-align: center;
}

div:hover {
  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
}

<div>dddddddddddd <br>dddddddddddd <br>dddddddddddd <br></div>

inset box-shadow - 相同的边和底部，顶部没有可见阴影

inset box-shadow - same sides and bottom, top without visible shadow

css

box-shadow