透明な境界線がグラデーションの背景を壊すのはなぜですか?どうすれば修正できますか?

境界線がグラデーションの背景からはみ出す

線形グラデーションの背景を持つ要素に透明な境界線を追加すると、予期しない効果が発生する可能性があります。左側と右側の色が正しくなく、平坦な外観になる可能性があります。

原因

境界線が描画されている間に、グラデーションがパディング ボックスの端まで広がっています。このエリアの外。この不一致により、視覚的に望ましくない結果が生じます。

解決策

この問題を修正するには、border の代わりに box-shadow:inset を使用することを検討してください。 box-shadow:inset はパディング ボックス内にレンダリングされ、背景の外観に影響を与えることなく境界線の効果を模倣します。

改訂された CSS:

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

注: box-shadow はスペースを占有しないため、パディングを調整してください

イラスト:

[パディングボックスとボーダーボックスの図のイメージ]ここ]

デモ:

http://jsfiddle.net/ilpo/fzndodgx/5/

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