ソリッド黒の境界線が何とか国境左

Question

を追加するとき、私は（これは何とか意図的で示唆のFirefoxとChromeの両方で再現可能、）私の問題を実証する非常に簡単なテストケースを作成しましたフェード

div 
 
{ 
 
    border: 1px solid black; 
 
    border-left: 250px solid white; 
 
}

<div>text</div>

上記のスニペットを実行すると、黒い枠線がはるかに遠く、実際には左側が大きく色褪せていることがわかります。どうして？

Answer 1

問題は、初期の境界線の幅を少し変更したときに簡単に説明できます。
罫線は斜めに斜めに取り付けられ、非常に長い左の罫線は対角線のつながりを引き伸ばします。アンチエイリアスはあなたが説明したフェードアウトにつながります。

div { 
 
    border: 5px solid blue; 
 
    border-left: 25px solid red; 
 
}

<div>text</div>

作成されてフェードアウトの継続的な例として：

div { 
 
    border: 1px solid black; 
 
    border-left: 1px solid white; 
 
    margin-bottom: 2px; 
 
} 
 

 
div:nth-child(2) { 
 
    border-left-width: 2px; 
 
} 
 

 
div:nth-child(3) { 
 
    border-left-width: 5px; 
 
} 
 

 
div:nth-child(4) { 
 
    border-left-width: 10px; 
 
} 
 

 
div:nth-child(5) { 
 
    border-left-width: 25px; 
 
} 
 

 
div:nth-child(6) { 
 
    border-left-width: 100px; 
 
}

<div>text</div> 
 
<div>text</div> 
 
<div>text</div> 
 
<div>text</div> 
 
<div>text</div> 
 
<div>text</div>

Answer 2

あなたは正しい、それが予想される動作です。これは、左境界線と下/上境界線の間の幅の遷移によって引き起こされます。左下罫線の幅が0〜1ピクセルのため、アンチエイリアス処理がスムーズに行われます（たとえば、0.5ピクセルは表示できません）。

私はそれをきれいな方法で記述できるかどうか分からないので、私はdemoを作りました。うまくいけば、どうやってそれが起こるのかを説明します。

HTML：

<div>text</div> 

CSS：それは250ピクセル幅の広いに

html { 
    background-color: yellow; 
} 
div { 
    border: 200px solid black; 
    border-left: 200px solid green; 

    transition: border 5s ease-out; 
} 

html:hover div { 
    border: 1px solid black; 
    border-left: 200px solid white; 
}