透明な境界線によって線形グラデーションが歪むのはなぜですか?それを修正するにはどうすればよいですか?

グラデーション上の境界線の異常: 説明され解決されました

線形グラデーションの背景を特徴とする要素上に透明な境界線を適用すると、予期しない動作が発生する可能性があります起きます。要素の左右の端は歪んだ色を示し、平坦に見えます。

この効果は、線形グラデーションが繰り返されるパディング ボックスを超えて延びる境界線から生じます。外側の境界領域はグラデーション カラーを継承しており、その結果、左側と右側で異常が見られます。

解決策: Box-Shadow を使用します

この問題を解決するには、次のようにします。ボーダーの代わりに box-shadow:inset を利用することを検討してください。ボックスシャドウは、背景と同様に、パディングボックス内にレンダリングされます。

CSS を次のように変更します:

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

説明:

• ボックスシャドウは空間領域を占有しないため、追加の領域を補うためにパディングを増やす必要があります。ボーダーのような効果。
• inset キーワードにより、ボックス シャドウがパディング ボックス内に残り、ボーダーの望ましい外観が反映されます。

結論:

パディングボックスに関連した境界線とグラデーションの動作を理解することで、この問題を効果的に解決できます。異常な効果を追加し、ボックスシャドウを使用して希望の境界線のような外観を実現します。

以上が透明な境界線によって線形グラデーションが歪むのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。