Question

我对CSS边界很新，我遇到了一些我似乎无法解决的问题。作为我的新手，并且有许多其他想知道同样的事情（css新手）。根据我的想法，我的边界应该可以正常工作（可能充满了错误的逻辑）。我用于悬停和默认状态的代码是：

.profile-box .opener {
    float:left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
        background-position: center center;
        background-color: #fff;
    width:32px;
    height:38px;
    overflow:hidden;
    text-indent:-9999px;
        border-left:1px solid #dde2e8;
}
.profile-box .opener:hover {
    float:left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
        background-position: center center;
        background-color: #F0F0F0;
    width:32px;
    height:38px;
    overflow:hidden;
    text-indent:-9999px;
        border-left:1px solid #dde2e8;
}

这个问题在任何方面都不会出现在我身上，我说两次，是css的新手。请帮我解决一下这个。这对我来说意义重大。感谢。

FIDDLE：http://jsfiddle.net/dCe3u/

Answer 1

如果您想将边框应用于所有四个方面，您应该更改

border-left:1px solid #dde2e8;

以

border:1px solid #dde2e8;

<强> FIDDLE HERE

border-left仅将边框应用于左侧，您可以在此处更多地参考边框 CSS BORDER >>

Answer 2

我刚检查了你的代码。我字面上复制并粘贴你的代码并且边框确实出现，我认为问题是边框的颜色太亮（如果你使用白色背景）。请参阅演示http://codepen.io/ImBobby/pen/yicCz。在那个演示中，我故意将边框颜色更改为红色。

我还注意到你在.opener元素的悬停状态下声明了相同的样式，但背景颜色除外。您可能希望将代码更改为：

.opener {
    float: left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
    background-position: center center;
    background-color: #fff;
    ...
}

.opener:hover {
    background-color: #F0F0F0;
}

简短说明，.opener:hover将继承opener的样式。

边界没有出现

2 个答案: