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

小提琴：

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并添加border属性。它不会是凌乱的

编辑 DEMO

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

Answer 2

您无法专门删除顶部框阴影。但是，您可以调整y轴使其不会出现在顶部，但它会将整个框阴影向下移动。

例如，尝试

box-shadow: 0 4px 0 5px #826200;

这会将阴影向下移动4个像素。 -4px会将它向上移动4个像素，这与你想要的相反。

所以看看4px对你的看法，你可以尝试将它调整到不同的值，看看什么最适合你。

Answer 3

只需删除您不希望显示的边框 -

  border-left: 0;

或者在宽度上也可以管理相同的 -

  border-width: 0 1px 1px 1px;

Answer 4

好吧，毫无疑问，我是个天才！这解决了我的问题：

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

.box:before {
  border-top: 2px solid white;
  content: "";
  margin: -9px 0 7px -7px;
  padding: 0 100%;
  position: absolute;
  width: auto;
}

谢谢大家的意见！

Css：仅限3个或更少边框的阴影？

4 个答案: