Css:框阴影仅适用于 3 个或更少的边框？

Question

我有一个盒子，周围有一个边框，还有一个盒子阴影和一个轮廓。但是，我不需要顶部边框的框阴影，所以我想让它消失但不向下移动框。有可能这样做吗？如果没有，我还有什么其他选择？

这是我的代码:

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 2px solid white;
}

fiddle :

http://jsfiddle.net/x7rrj/

Answer 1

Fiddle Demo

您不能只删除顶框阴影。但是你可以隐藏它。根据您的代码

.box {
 background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
 border: 4px solid black;
 box-shadow: 0 4px 0 5px red;
 outline: 2px solid white;
 width:100px;
 height:100px;
}

你可以使用上面的css。

编辑 FIDDLE

是的，底部很乱。所以请参阅我的替代解决方案。用容器封装 div 并添加边框属性。不会乱

编辑 DEMO

仅使用伪元素和边框属性之前的 CSS 解决方案。