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

您可以通过添加一个充当边框的伪元素来解决角落缝问题。如下所示：

.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

边框左边和边框顶边的问题

1 个答案: