html - border left 和 border top 在一起的问题

Question

我正在尝试为我选择的按钮添加一个左边框，但似乎发生了一些我无法弄清楚的奇怪事情。

你可以在this JSFiddle中看到它.

左边的蓝色边框上面好像多了一个奇数1px？它只是没有像我希望的那样完全正方形。

HTML:

<div id="sidebarnav">
    <br>
    <a href="blog"><div class="button-selected">Blog</div></a>
</div>

CSS:

#sidebarnav {
    width:250px;
    background-color:#202020;
    height: 100%;
    float:left;
    position:fixed;
    border-right: 1px solid #bbb;
}

.button-selected {
    text-align:left;
    width: 236;
    padding-left: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color:#161616;
    color: #fff;
    border-top: 1px solid #0A0A0A;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04) inset;
    overflow:auto;
    cursor: pointer;
    border-left: 4px solid #3498db;
}

Answer 1

您可以通过添加一个类似于边框的伪元素来解决 Angular 接缝问题。类似于以下内容:

.button-selected {
    /* all of your original styling here */
    position: relative; /* relative positioning required for position
                           absolute on pseudo element */        
    padding-left: 14px; /* 4px of padding added to compensate for
                           width of pseudo element */
}
.button-selected:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px; /* width of desired 'border' effect */
    background: #3498db;
}

Updated example of your jsfiddle here .