CSS で透明な境界線がグラデーションの背景を歪めるのはなぜですか?

グラデーションの背景による透明な境界線の歪み

CSS で、線形グラデーションの背景を持つ要素に透明な境界線を適用すると、異常なエラーが発生する可能性があります。要素の左端と右端の色が歪んだり平坦になったりする効果です。

これは発生します。グラデーションの開始点と終了点はパディング ボックスの端にあり、境界線はパディング ボックスの外側にレンダリングされるためです。その結果、境界ボックスを埋めるためにパディング ボックスの両側で背景が繰り返されるため、境界線は視覚的に歪んで見えます。

歪みの原因

この歪みの理由は、ブラウザが CSS ボックス モデルを解釈する方法にあります。パディング ボックスは要素のコンテンツが配置される領域を決定し、ボーダー ボックスはパディング ボックスとボーダーを囲みます。指定されたシナリオでは、グラデーションの背景はパディング ボックス内に含まれていますが、透明な境界線がその境界を超えています。

解決策

この問題を解決するには、次の手順を実行します。 「box-shadow: inset」として知られる CSS プロパティを使用できます。境界線とは異なり、インセット ボックスのシャドウはパディング ボックス内でレンダリングされ、歪みを引き起こすことなく境界線と視覚的に似た効果を提供します。

境界線を次の box-shadow プロパティで置き換えることにより、目的の外観が得られます。

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

さらに、ボックスシャドウはボーダーのようにスペースを占有しないため、パディングを増やす必要があります

図

次の図は、パディング ボックスとボーダー ボックスの違いを示しています。

[パディング ボックスとボーダー ボックスのイメージ] border-box]

デモ

ソリューションのインタラクティブなデモは、http://jsfiddle.net/ilpo/fzndodgx/5/

以上がCSS で透明な境界線がグラデーションの背景を歪めるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。