Mengapa Sempadan Telus Memecahkan Latar Belakang Kecerunan Saya, dan Bagaimana Saya Boleh Membetulkannya?

Latar Belakang Kecerunan Melimpah Sempadan

Apabila menambahkan sempadan lutsinar pada elemen dengan latar belakang kecerunan linear, kesan yang tidak dijangka boleh timbul. Bahagian kiri dan kanan mungkin mempamerkan warna yang salah dan rupa yang rata.

Sebab

Kecerunan memanjang ke tepi kotak padding, manakala jidar dilukis luar kawasan ini. Jurang ini mewujudkan visual yang tidak diingini.

Penyelesaian

Untuk membetulkan isu ini, pertimbangkan untuk menggunakan box-shadow:inset dan bukannya sempadan. box-shadow:inset dipaparkan dalam kotak padding, meniru kesan sempadan tanpa menjejaskan penampilan latar belakang.

CSS yang disemak:

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

Nota: Memandangkan bayangan kotak tidak menempati ruang, laraskan padding sewajarnya.

Ilustrasi:

[Imej ilustrasi kotak padding dan kotak sempadan di sini]

Demo:

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

Atas ialah kandungan terperinci Mengapa Sempadan Telus Memecahkan Latar Belakang Kecerunan Saya, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!