如何删除 div 上的边框部分，以使左侧导航看起来与主要内容部分无缝衔接

Question

我正在尝试删除活动菜单项与右侧内容div相遇的左边框。

查看 http://d.pr/i/hfRZ+

因此，活动元素似乎与主要内容div的级别相同，如下所示 http://dribbble.com/shots/663779-Left-navigation

如果这很重要，我正在使用推特引导程序。

任何指示都非常感谢！

编辑：这是指向HTML/CSS的链接

视图：http://codepen.io/anon/full/Asrnm

编辑http://codepen.io/anon/pen/Asrnm

Answer 1

你不能部分删除边框，你只能掩盖它们。您需要使所选项目与边框重叠（或者使用在边框上放置另一个元素的脚本）。

Answer 2

您可以让所选项目只有上下边框

.selected-item
{
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

或

.selected-item
{
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-left: 0px;
    border-right: 0px;
}

为了避免盒子阴影逃离父容器，您可以将其替换为

.selected-item:after
{
    display: block;
    position: absolute;
    height: 10px;
    background: url("gradient.gif") top left repeat-x;
}

这样，您可以在元素下方获得一致的水平阴影，该阴影一直到父元素及其边框，但不会超出父元素及其边框。

Answer 3

.selected-item {
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px
}