CSS边框没有AppRearing在Div

-2

我正在为我的网站制作一个页面，其中有一个导航链接类.link，放在了一些div s上。当我在其上应用边框时，它不显示。相同的边框（边框的半径和宽度除外）应用于另一个div，名为#pageHead，并显示正确。在下面的代码中，只显示相关的部分。样式表的链接位于文档的头部，我知道它正常工作。该HTML是body标签的内部标签，一切都在html标签内，并以<!DOCTYPE html>为首。CSS边框没有AppRearing在Div

在我的HTML：

<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>

在我的CSS：

#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; 
      }

把HTML编辑器内的相应标签内这些摘录将复制的结果。我用htmledit.squarefree.com来测试，并把代码放在这里。

<head> 
<style> 
<!--The CSS excerpt above--> 
</style> 
<body> 
<!--The HTML excerpt above--> 
</body>

下面是截图。带有“家”的盒子应该有一个边框，但不是。

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

为清楚起见，我试图找出如何解决.link的边界，如果你知道，为什么会这样。

来源

2014-09-13 MineAndCraft12

那是行不通的？在[在线演示]（http://jsfiddle.net/ov4ewhxf/）上似乎很好。 – Dalorzo 2014-09-13 05:12:28

谢谢！通过你和其他评论，我意识到我的错误 - 背景和边框是相同的颜色......我觉得我浪费了一些人在这里的时间... – MineAndCraft12 2014-09-15 04:00:18

.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

来源

2014-09-13 05:15:17 Sam1604

谢谢！通过你和其他评论，我意识到我的错误 - 背景和边框是相同的颜色...我觉得我浪费了一些人在这里的时间... – MineAndCraft12 2014-09-15 04:00:55

没关系。很高兴帮助你。 – Sam1604 2014-09-15 04:02:55

一色换background和border导致问题

所以更改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%; 
     }

来源

2014-09-13 05:19:44

谢谢！通过你和其他评论，我意识到我的错误 - 背景和边框颜色一样......我觉得我在这里浪费了一些人的时间...... – MineAndCraft12 2014-09-15 04:02:01

CSS边框没有AppRearing在Div

回答

相关问题