Mengapa Sempadan Lutsinar pada Kecerunan Linear Menyebabkan Pertukaran Warna dan Meratakan?

Ketelusan Atas Latar Belakang Kecerunan: Menyiasat Kesan Sempadan Pelik

Apabila menambahkan sempadan lutsinar pada elemen dengan latar belakang kecerunan linear, timbul fenomena luar biasa. Warna di sepanjang tepi kiri dan kanan kelihatan tidak betul, seolah-olah telah ditukar. Selain itu, bahagian ini mempamerkan rupa yang rata.

Serpihan HTML:

<div class="colors"></div>

Konfigurasi CSS:

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

Punca Kesan:

Isu ini berlaku kerana titik permulaan dan penamat kecerunan diletakkan di tepi kotak padding. Walau bagaimanapun, sempadan dilukis di luar kotak padding. Memandangkan latar belakang berulang merentasi kotak sempadan pada setiap sisi, jidar kelihatan pelik.

Penyelesaian Menggunakan bayangan kotak:

Untuk meniru kesan visual sempadan tanpa isu ini, pertimbangkan untuk menggunakan bayang kotak:

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

Memandangkan bayangan kotak tidak menempati ruang, ia adalah penting untuk melaraskan padding dengan sewajarnya.

Rajah Padding-Box dan Border-Box:

[Imej padding-box dan border-box]

Demo Langsung:

Terokai gelagat yang diperbetulkan dalam JSFiddle ini: http://jsfiddle.net/ilpo/fzndodgx/5/

Atas ialah kandungan terperinci Mengapa Sempadan Lutsinar pada Kecerunan Linear Menyebabkan Pertukaran Warna dan Meratakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!