Bagaimana untuk mencipta kesan sempadan kecerunan menggunakan CSS

Cara menggunakan CSS untuk mencipta kesan sempadan kecerunan

CSS ialah bahagian penting dalam reka bentuk web, ia boleh menambah pelbagai kesan pada halaman web. Antaranya, mencipta kesan sempadan kecerunan adalah keperluan biasa. Kita boleh mencapai kesan ini dengan mudah dengan menggunakan sifat kecerunan CSS. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencipta kesan sempadan kecerunan dan melampirkan contoh kod tertentu.

1. Sempadan Kecerunan Linear

Pertama, mari perkenalkan cara mencipta kesan sempadan kecerunan linear. Berikut ialah contoh kod:

<style>
.box {
  width: 300px;
  height: 200px;
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue);
  border-image-slice: 1;
}
</style>

<div class="box"></div>

Dalam kod di atas, kami menetapkan kotak selebar 300 piksel, kotak tinggi 200 piksel kepada elemen bernama .box dan menetapkan sempadan kepada garis pepejal selebar 5 piksel. Kemudian, gunakan atribut imej sempadan untuk mencipta kesan sempadan kecerunan. Fungsi linear-gradient() digunakan untuk mencipta kecerunan linear, dan parameter ke kanan menentukan arah kecerunan, daripada merah ke biru. Akhir sekali, tetapkan lebar sempadan kecerunan kepada 1 piksel melalui sifat keping imej sempadan. Ini melengkapkan penghasilan sempadan kecerunan linear.

2. Sempadan Kecerunan Radial

Seterusnya, mari perkenalkan cara mencipta kesan sempadan kecerunan jejarian. Berikut ialah contoh kod:

<style>
.box {
  width: 300px;
  height: 200px;
  border: 5px solid;
  border-image: radial-gradient(circle, red, blue);
  border-image-slice: 1;
}
</style>

<div class="box"></div>

Dalam kod di atas, kami menggunakan fungsi radial-gradient() untuk mencipta radial gradient. Bulatan parameter dalam fungsi bermakna mencipta kecerunan jejari bulat. Kemudian, nyatakan warna permulaan kecerunan sebagai merah dan warna penamat sebagai biru. Akhir sekali, tetapkan lebar sempadan kecerunan kepada 1 piksel melalui sifat keping imej sempadan. Ini melengkapkan pengeluaran sempadan kecerunan jejarian.

3. Sempadan kecerunan berbilang

Selain sempadan kecerunan tunggal, kami juga boleh membuat sempadan kecerunan berbilang. Berikut ialah contoh kod:

<style>
.box {
  width: 300px;
  height: 200px;
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue) linear-gradient(to bottom, green, yellow);
  border-image-slice: 1;
}
</style>

<div class="box"></div>

Dalam kod di atas, kami menggunakan atribut imej sempadan untuk mencipta dua sempadan kecerunan linear pada masa yang sama. Jidar kecerunan pertama pudar daripada merah ke biru dan arah kecerunan adalah dari kiri ke kanan. Sempadan kecerunan kedua berubah dari hijau ke kuning, dan arah kecerunan adalah dari atas ke bawah. Dengan mengasingkan kecerunan yang berbeza dengan ruang, kita boleh mencapai kesan sempadan berbilang kecerunan.

Ringkasnya, dengan menggunakan sifat kecerunan CSS, kami boleh mencipta pelbagai kesan sempadan kecerunan dengan mudah. Sama ada sempadan kecerunan linear, sempadan kecerunan jejarian atau sempadan kecerunan berbilang, ia hanya memerlukan beberapa baris kod mudah untuk mencapainya. Saya harap pengenalan dalam artikel ini dapat membantu pembaca menggunakan CSS dengan lebih baik untuk mencipta kesan sempadan kecerunan.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan sempadan kecerunan menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!