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

回答

相關問題