html - border-bottom 越过 border-left

Question

我只想在已经具有顶部和底部边框(1px 纯灰色)的 div 上添加一个左边框(5px 纯蓝色)。我希望 border-left 位于 border-top 和 border-bottom 之上，但浏览器将其呈现为这样:

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

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

---

@Nick 这里是我在浏览器上看到的:

这是我想要的:

Answer 1

可能有几种不同的方法可以做到这一点。您可以尝试使用新的伪元素在您想要的位置生成边框。

但我想我可能会使用 box-shadow 属性。看看我的 fiddle ，为了清晰起见，它夸大了颜色和大小:

http://jsfiddle.net/5hJdA/

我使用了具有 0 模糊半径和 0 扩散的嵌入框阴影。我还在左侧添加了一个填充值，以便内容清除左侧“边框”的宽度。由于 box-shadow 是嵌入的，它的效果将在元素的边框边界内呈现。

在这里发布代码因为 SO 需要它(蹩脚):

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