Div没有出现CSS边框

时间:2014-09-13 05:08:06

标签: html css border

我正在为我的网站制作一个页面,其中包含一个名为.link的导航链接类,该类位于某些div上。当我在其上应用边框时,它不会显示。相同的边框(边框的半径和宽度除外)将应用于另一个名为div的{​​{1}}并正确显示。在以下代码中,仅显示了相关的部分。样式表的链接位于文档的开头,我知道它可以正常工作。 HTML位于#pageHead个标记内,所有内容都在body个标记内,并以html开头。

在我的HTML中:

<!DOCTYPE html>

在我的CSS中:

<div id="pageHead">
    <h1>CodeGameCentral</h1>
    <h3>Games Made With Code</h3>
</div>
<div id="links">
    <div class="link">
        <a href="../main/?pageNumber=1">Home</a>
    </div>
</div>

将这些摘录放在HTML编辑器中的相应标签内会复制结果。我使用htmledit.squarefree.com来测试它,然后把代码放到这里。

#pageHead{
    background-color:#7F7F7F;
    border:3px solid #FF0000;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top:none;
    color:#AA0000;
}
    h1, h3, #links{
        font-family:monsopace;
        text-align:center;
    }
    #links{
        width:90%;
        margin:auto;
    }
        .link{
            background-color:#7F7F7F;
            border:2px solid #7F7F7F;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
            border-top:none;
            cursor:pointer;
            text-align:center;
            width:100%;
        }
            a{
                text-decoration:none;
                color:#AA0000;
            }

这是截图。其中带有“Home”的框应该有边框,但不是。

http://i.stack.imgur.com/Epcop.jpg

为清楚起见,我试图了解如何修复<head> <style> <!--The CSS excerpt above--> </style> <body> <!--The HTML excerpt above--> </body> 的边界,如果你知道,为什么会这样。

2 个答案:

答案 0 :(得分:1)

   .link{
        background-color:#7F7F7F;
        border:2px solid #7F7F7F; /* Change the Color Code to see the difference */
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        border-top:none;
        cursor:pointer;
        text-align:center;
        width:100%;
    }

borderbackground-color相同。给出不同的颜色以查看.link

的边框

这是 Fiddle DEMO

答案 1 :(得分:0)

backgroundborder的相同颜色导致问题

所以改变border-color

DEMO

  .link{
            background-color:#7F7F7F;
            border:2px solid Blue;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
            border-top:none;
            cursor:pointer;
            text-align:center;
            width:100%;
        }