使背景色的第一个垂直5像素与其余颜色不同

Question

如何在div中将背景色的第一个垂直 5像素设为蓝色？因此，换句话说，在下面的示例中，将有一个蓝色的条形图在顶部延伸500个像素，高度为5个像素。

明确地说，我有一个特殊的原因，我不能使用边框，等等（我希望那是那么容易！）

这是我到目前为止（链接到这里的小提琴）：

CSS：

.box {
height: 200px;
width: 500px;
background-color: red;
}

HTML：

<div class="box">
</div>

Answer 1

Box-shadow具有比渐变更好的浏览器支持。这就是我的方法。坦白说，盒子阴影非常棒。您可以对它们做很多事情，以保持标记的整洁。

box-shadow: inset 0px 5px 0 0 blue
-webkit-box-shadow: inset 0px 5px 0 0 blue