Bagaimana untuk Mencapai Tepi Licin dalam Imej Gradien Linear Bersudut?

Imej Latar Belakang dengan Kecerunan Linear: Tepi Bergerigi Dilawati Semula untuk Hasil Yang Lancar

Apabila mencipta imej kecerunan linear bersudut, adalah perkara biasa untuk menghadapi bergerigi tepi pada garisan segi tiga. Untuk mengurangkan isu ini dan mencapai garisan yang lebih lancar, adalah penting untuk mengelakkan warna yang sukar dihentikan.

Penyelesaian:

Penyelesaian terletak pada melaraskan titik henti dan mula daripada warna dalam kecerunan linear. Dengan mengalihkan sedikit titik permulaan warna kedua dari titik henti warna pertama, kawasan kabur tercipta, menghasilkan garisan yang lebih lancar.

CSS yang dikemas kini:

<code class="css">.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}

.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}</code>

Penjelasan:

Dengan menukar titik hentian dan permulaan kecerunan seperti yang ditunjukkan di atas, peralihan antara kedua-dua warna menjadi lembut, menghilangkan kelebihan yang kasar dan menghasilkan garisan yang lebih licin.

Penyelesaian ini serasi dengan kebanyakan penyemak imbas moden dan memberikan peningkatan ketara dalam kualiti pemaparan imej kecerunan linear bersudut.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Tepi Licin dalam Imej Gradien Linear Bersudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!