Html 边界没有出现

我对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的新手。请帮我做这个。这对我来说意义重大。谢谢

---

小提琴：

如果要将边框应用于所有四边，则应更改

border-left:1px solid #dde2e8;

至

border:1px solid #dde2e8;

---

border left将仅在左侧应用border，您可以在此处参考更多关于border的信息

我刚刚检查了您的代码。我从字面上复制并粘贴了你的代码，边框确实出现了，我认为问题是边框的颜色太浅（如果你使用白色背景）。请看演示。在那个演示中，我故意将边框颜色更改为红色

我还注意到，除了背景色之外，您在

.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

中的样式

非常适合设置这样的东西，以便其他人可以修补它。目前看来，没有任何明显的错误（至少对我来说）供参考，您不必在

：hover

状态下重复样式声明。你所需要的就是背景色：#f0添加了小提琴。应该早点做的，我看到边界了。一切如预期。。。你用的是什么浏览器？或者您希望看到什么？定义“不正确显示”；我觉得还可以。需要注意的一点是，

边框

增加了元素的

宽度

和

高度

——因此您的元素在这里是34x40，而不是32x38