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

Question

正在尝试模拟不是从元素左边缘开始的上边框。

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

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

http://jsfiddle.net/3sjngyk1/

Answer 1

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

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

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

Answer 2

只有框阴影的顶部边框？

.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>

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

box shadow for simulating top border

css

box-shadow