線形グラデーション上の透明な境界線によって色の入れ替わりや平坦化が発生するのはなぜですか?

グラデーション背景上の透明度: 奇妙な境界線効果の調査

線形グラデーションの背景を持つ要素に透明な境界線を追加すると、異常な現象が起きる。左右の端に沿った色が、入れ替わったように不正確に表示されます。さらに、これらのセクションは平坦な外観を示します。

HTML フラグメント:

<div class="colors"></div>

CSS 構成:

.colors {
    width: 100px;
    border: 10px solid rgba(0, 0, 0, 0.2);
    height: 50px;
    background: linear-gradient(
        to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5);
}

原因影響:

この問題は、グラデーションの開始点と終了点がパディング ボックスの端に配置されているために発生します。ただし、境界線はパディングボックスの外側に描画されます。背景が両側の境界ボックス全体で繰り返されるため、境界線は独特に見えます。

box-shadow を使用した解決策:

境界線の視覚効果を複製するにはこの問題がなければ、box-shadow の使用を検討してください:

box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.2);
padding: 10px;

box-shadow はスペースを占有しないため、それに応じてパディングを調整することが重要です。

パディング ボックスとボーダー ボックスの図:

[パディング ボックスとボーダー ボックスの画像]

ライブデモ:

これで修正された動作を確認してくださいJSFiddle: http://jsfiddle.net/ilpo/fzndodgx/5/

以上が線形グラデーション上の透明な境界線によって色の入れ替わりや平坦化が発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。