CSS如何制作一个完全分配的左边界（或右边界）？

Question

我试图在纯CSS来实现的设置引导3面板的左边框：

下面是做到这一点的strandard方式：

.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/