我正在为我的网站制作一个页面,其中包含一个名为.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>
的边界,如果你知道,为什么会这样。
答案 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%;
}
border
和background-color
相同。给出不同的颜色以查看.link
这是 Fiddle DEMO
答案 1 :(得分:0)
background
和border
的相同颜色导致问题
所以改变border-color
.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%;
}