我只想在已经具有顶部和底部边框(1px 纯灰色)的 div 上添加一个左边框(5px 纯蓝色)。我希望 border-left 位于 border-top 和 border-bottom 之上,但浏览器将其呈现为这样:
到目前为止我找到的唯一解决方案是将它包装在另一个 div 中并将左边框放在这个 div 上,但我不太喜欢它。
如果谁有更好的解决方案...
@Nick 这里是我在浏览器上看到的:
这是我想要的:
最佳答案
可能有几种不同的方法可以做到这一点。您可以尝试使用新的伪元素在您想要的位置生成边框。
但我想我可能会使用 box-shadow 属性。看看我的 fiddle ,为了清晰起见,它夸大了颜色和大小:
我使用了具有 0 模糊半径和 0 扩散的嵌入框阴影。我还在左侧添加了一个填充值,以便内容清除左侧“边框”的宽度。由于 box-shadow 是嵌入的,它的效果将在元素的边框边界内呈现。
在这里发布代码因为 SO 需要它(蹩脚):
element {
box-shadow: 25px 0 0 0 blue inset;
}
关于html - border-bottom 越过 border-left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23788464/