用于模拟顶部边框的框阴影

Question

尝试模拟不在元素左边缘开始的顶部边框。

.border-top {
    height: 50px;
    width: 100px;
    box-shadow:  15px -1px 0 0 black;
}

上面的css很接近，但在div的右边产生一个黑色的15px宽的阴影。我该如何包含它？

http://jsfiddle.net/3sjngyk1/

Answer 1

只有一个盒子阴影的顶部边框？

.border-top {
  height: 50px;
  width: 100px;
  box-shadow: 0px -10px 0px 0px red;
  margin-top: 25px;
  background: lightblue;
}

<div class="border-top"></div>

或者，您可以使用伪元素和calc（如果边框不是全宽 - 从您的问题中不清楚）。

.border-top {
  height: 50px;
  width: 100px;
  background: lightblue;
  position: relative;
  margin-top: 25px;
}
.border-top::after {
  content: '';
  position: absolute;
  height: 5px;
  bottom: 100%;
  left: 15px;
  width: calc(100% - 15px);
  background: red;
}

<div class="border-top"></div>

Answer 2

这个怎么样？ http://jsfiddle.net/vleong2332/3sjngyk1/2/

.border-top {
    height: 50px;
    width: 100px;
    box-shadow: 15px 0px 0 0 white, 15px -1px 0 0 black;
}

将另一个与背景颜色相同的阴影放在黑色顶部。