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

Herohan Sempadan Lutsinar pada Latar Belakang Kecerunan

Memohon sempadan lutsinar pada elemen dengan latar belakang kecerunan linear boleh menghasilkan kesan visual yang pelik di mana bahagian tepi elemen kelihatan herot atau "rata." Ini berlaku kerana kecerunan melangkaui kotak padding ke dalam kotak sempadan, menyebabkan sempadan mengganggu warna.

Punca Kesan

Isunya berpunca daripada susunan pemaparan yang berbeza bagi kecerunan dan sempadan. Kecerunan dilukis dalam kotak padding, manakala sempadan dilukis di luar kotak padding. Akibatnya, sempadan bertindih pada kecerunan, mewujudkan kesan yang tidak diingini.

Penyelesaian: Sebaliknya Menggunakan Box Shadow

Untuk membetulkan ini, pertimbangkan untuk menggunakan box-shadow: sisipan bukannya sempadan. Bayang kotak dipaparkan dalam kotak padding, serupa dengan kecerunan, menghapuskan isu pertindihan.

Sampel Kod

.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;
}

Faedah Penggunaan Box Shadow

Menggunakan box-shadow menawarkan beberapa kelebihan:

• Ia menghasilkan kesan visual yang sama seperti sempadan tanpa menjejaskan pemaparan latar belakang.
• Bayang kotak tidak mengambil ruang fizikal, jadi anda boleh melaraskan padding dengan sewajarnya .

Demonstrasi Fiddle

Rujuk kepada ikut biola untuk melihat kesan dalam tindakan: http://jsfiddle.net/ilpo/fzndodgx/5/

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