CSS邊框角度問題

我正在用4種不同顏色邊框創建菜單。在Safari 5中查看時，左側和右側邊框從上到下沒有圍繞框的角度。在FF 4中查看時，邊框底部和邊界右部元素處有邊框角。這使得菜單在不同的瀏覽器中看起來不同。這裏是菜單項的CSS：CSS邊框角度問題

ul#mainnav a { 
    display: block; 
    text-decoration: none; 
    color: #b0c9da; 
    padding: 7px 7px 7px 14px; 
    border-bottom: 1px solid #01304f; 
    border-top: 1px solid #1a74af; 
    border-right: 1px solid #fff; 
    border-left: 1px solid #246792; }

請指教。謝謝

來源

2011-03-30 katart

有何不同？你可以張貼截圖或其他東西嗎？或者在http://jsfiddle.net上寫一個樣本 – gideon 2011-03-30 18:43:45

「邊界角」是什麼意思？你提供的CSS有一個1px的邊框。你怎麼能有一個像素角？附件是我用Safari 5提供的一個5像素邊框的截圖。看起來它對我有一個角度：https://img.skitch.com/20110330-fb72iid4dqggx2gmpwbcfxd1a3.jpg – metavida 2011-03-30 19:49:40

這是由於瀏覽器決定從哪裏開始邊界線以及在哪裏結束它。不幸的是，沒有解決這個問題。你最好的選擇是挑選足夠相似的邊框顏色，以至於不會那麼突出。

另一個需要現代瀏覽器/ CSS3支持的選項是在元素上使用box-shadow。例如：

box-shadow: inset 1px 1px 1px rgba(255,0,0,1), 
      inset 1px -1px 1px rgba(0,255,0,1);

只能添加1px的寬的盒陰影的多個層，並指定他們「滴」的方向。可以很有趣地玩。

來源

2011-03-30 20:38:02 Joshua

感謝您的回答，我只是遇到了這個問題，並且做了陰影工作就像一個魅力。 – 2013-03-19 18:29:18

CSS邊框角度問題

回答

相關問題