边界底部在边界左边跑

Question

我想在一个已经有边框顶部和底部（1px纯灰色）的div上使用边框左边（5px实心蓝色）。我希望border-left位于border-top和border-bottom之上，但是浏览器会像这样呈现：

到目前为止，我找到的唯一解决方案是将它包装在另一个div中，然后将左边框放在这个上，但我真的不喜欢它。

如果有人有更好的解决方案......

---

@Nick在这里我如何在浏览器上看到它：

这就是我想要的方式：

Answer 1

可能有几种不同的方法可以做到这一点。您可以尝试使用新的伪元素来生成所需的边框。

但我想我可能会选择使用box-shadow属性。看看我的小提琴，为了清晰起见，它有夸张的颜色和大小：

http://jsfiddle.net/5hJdA/

我使用了一个插入框阴影，模糊半径为0，传播范围为0。我还在左边添加了一个填充值，以便内容清除左边框的宽度。由于框阴影是插入的，因此其效果将在元素的边界边界内呈现。

在此处发布代码，因为SO需要它（跛脚）：

element {
    box-shadow: 25px 0 0 0 blue inset;
}