Bagaimanakah Saya Boleh Mencipta Lengkung Lancar Antara Kecerunan Menggunakan CSS dan SVG?

Mencipta Lengkung Lancar antara Kecerunan Menggunakan CSS

Mencipta lengkung licin antara kecerunan dalam CSS boleh menjadi satu cabaran, tetapi dengan pendekatan yang betul, adalah mungkin untuk mencapai hasil yang mengagumkan.

Satu penyelesaian yang berkesan melibatkan penggunaan gabungan kecerunan linear dengan SVG.

Pertimbangkan contoh berikut:

.container {
  width: 500px;
  height: 200px;
  background: linear-gradient(to bottom right, #de350b, #0065ff);
}

svg {
  width: 100%;
}

<div class="container">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 64 64">
    <defs>
      <linearGradient>

Dalam contoh ini, kami mentakrifkan div bekas dengan latar belakang kecerunan linear. Kami kemudian mencipta elemen SVG dan mentakrifkan kecerunan linear dalam bahagian defsnya. Kecerunan kemudiannya digunakan sebagai warna isian laluan tersuai yang ditakrifkan dalam SVG.

Bentuk laluan mencipta lengkung seperti S, menyambungkan dua kecerunan dengan lancar. Dengan melaraskan titik kawalan (30, 28) dan (38, 0) dalam atribut d laluan, anda boleh menyesuaikan bentuk dan keamatan lengkung.

Pendekatan ini menawarkan kelebihan berbanding teknik lain, seperti jejari sempadan atau laluan klip, kerana ia menyediakan kawalan penuh ke atas bentuk lengkung, sambil kekal responsif dan serasi dengan semua penyemak imbas utama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Lengkung Lancar Antara Kecerunan Menggunakan CSS dan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!