粗CSS邊框沒有給出一個乾淨的矩形

這似乎很簡單，但令人驚訝的是沒有發現任何人面臨此問題。看看這個小提琴：粗CSS邊框沒有給出一個乾淨的矩形

它有一個厚厚的邊框4PX像這樣：

<div style="border: 1px solid #E3E3E3; border-top: 4px solid rgb(255, 153, 0);width: 300px; height: 250px;"></div>

如果您發現，頂厚邊框不乾淨的矩形渲染。它是一個從上到下小錐度的梯形。我檢查了MAC OS X和Windows以及Firefox，Chrome和IE都出現這種情況。您可以將其縮小至約4倍，非常清楚地觀察。

這是我能解決的問題嗎？爲什麼會發生？

來源

2014-01-27 Venkat

邊界不是矩形......它們都在45度（約）相遇 –

確實 - http://appendto.com/2013/03/pure-css-triangles-explained/可能是一個有趣的閱讀。 –

這裏是你可以解決一個乾淨的矩形頂邊境哈克的方式：

HTML

<div id="test_div"></div>

CSS

#test_div:before { 
    position:absolute; 
    width:100%; 
    padding:1px; 
    top:0; 
    content: ''; 
    left:-1px; 
    background:#000; 
    height:1px; } 

#test_div { 
    border: 1px solid #E3E3E3; 
    border-top:0; 
    width: 300px; 
    height: 250px; 
    position:relative; }

jsFiddle

來源

2014-01-27 15:30:03

當你有不同厚度的邊界時，這是預期的結果。

角邊緣從外眼角到內眼角有云：

***************************** 
** 
** 
* * 
* * 
* ************************** 
* * 
* * 
* *

如果邊角進行了對角線，內眼角不匹配：

***************************** 
** 
* ** 
* ** 
* * ** 
* * ********************** 
* * 
* * 
* *

如果邊角進行了直減，他們不會以你想要的方式重疊。瀏覽器以不同重疊角，所以在一些你會得到：

***************************** 
* * 
* * 
* * 
* * 
* ************************** 
* * 
* * 
* *

，而在其他你會得到：

***************************** 
* 
* 
* 
* 
***************************** 
* * 
* * 
* *

同樣會去其他的角落，但不能始終如一。有些瀏覽器會讓頂部邊框與兩邊重疊，有些會使其中一個邊與頂部重疊，有些會使兩邊重疊在頂部。

要獲得那種直切角，您只需使用多個元素。您可以將一個元素僅用於頂部邊框，或者可以包裝兩個元素並將頂部邊框設置爲外部元素。

來源

2014-01-27 15:30:12 Guffa

粗CSS邊框沒有給出一個乾淨的矩形

回答

相關問題