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

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

線形グラデーションの背景を持つ要素に透明な境界線を適用すると、独特の視覚効果が生じる可能性があります要素のエッジが歪んでいるか「平ら」に見える場合。これは、グラデーションがパディング ボックスを超えて境界ボックスにまで広がり、境界線が色と干渉するために発生します。

影響の原因

問題これは、グラデーションと境界線のレンダリング順序が異なることに起因します。グラデーションはパディング ボックス内に描画され、境界線はパディング ボックスの外側に描画されます。その結果、境界線がグラデーション上に重なり、望ましくない効果が生じます。

解決策: 代わりにボックス シャドウを使用します

これを修正するには、box-shadow の使用を検討してください。境界線の代わりに差し込み線を使用します。ボックス シャドウは、グラデーションと同様にパディング ボックス内でレンダリングされ、重なりの問題を排除します。

コード サンプル

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

使用の利点Box Shadow

box-shadow を使用すると、次のような利点があります。利点:

• 背景のレンダリングに影響を与えることなく、境界線と同じ視覚効果を生成します。
• ボックスシャドウは物理的なスペースを占有しないため、それに応じてパディングを調整できます。 .

Fiddle デモンストレーション

参照次のフィドルにアクセスして、実際の効果を確認してください: http://jsfiddle.net/ilpo/fzndodgx/5/

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