html - CSS 如何制作完美对齐的左(或右)边框？

Question

我试图在纯 CSS 中完成的是设置 Bootstrap 3 面板的左边框:

这是标准的方法:

.panel-default>.panel-heading.standard {
    border-left: 5px solid red;
}

这里是使用伪元素:

.panel-default>.panel-heading.pseudo:before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 4px;
    height: 100%;
    background-color: blue;
}

两种情况下的结果都不正常。使用标准方式，边框有点“倾斜”(仅在右下角，为什么？)，使用伪元素我可以使矩形边距为负(即 -1，-1)，但我需要知道确切的标题高度:

Answer 1

您不需要知道标题的确切高度，只需知道边框的高度即可。因此，例如，如果顶部和底部的边框均为 1px:

.panel-default>.panel-heading.pseudo:before {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    content: " ";
    display: block;
    width: 4px;
    background-color: blue;
}

演示:http://jsfiddle.net/sbr3q2tq/