css - 用于模拟上边框的框阴影

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

在黑色阴影上放置另一个与背景颜色相同的阴影。