CSS3 merealisasikan bulatan

Dalam reka bentuk web, selalunya perlu menggunakan pelbagai bentuk untuk susun atur, dan bulatan ialah salah satu bentuk yang paling asas dan biasa digunakan. Pada masa lalu, merealisasikan bentuk bulat selalunya memerlukan penggunaan imej atau teknologi JavaScript, tetapi selepas keluaran standard CSS3, bentuk bulat boleh direalisasikan dengan mudah melalui CSS tanpa menggunakan teknologi tambahan, meningkatkan kelajuan memuatkan halaman dan mengurangkan kos pembangunan.

Dalam CSS3, terdapat dua cara utama untuk mencapai bulatan: menggunakan atribut jejari sempadan atau menggunakan atribut laluan klip. Kaedah khusus kedua-dua kaedah pelaksanaan ini akan diperkenalkan di bawah.

Gunakan sifat jejari sempadan untuk mencapai bulatan

Sifat jejari sempadan dalam CSS3 membolehkan kami membuat sudut bulat licin di sudut sempadan elemen. Apabila menggunakan sifat ini pada elemen segi empat sama, bulatan boleh dicapai.

Seterusnya, mari lihat contoh pelaksanaan bulatan:

.circle {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
}

Dalam contoh ini, kami menetapkan kedua-dua lebar dan tinggi kepada 100px, dan kemudian menetapkan atribut jejari sempadan kepada 50 % , anda boleh menukar petak ini menjadi bulatan. Perlu diingatkan bahawa nilai atribut jejari sempadan mestilah peratusan dan sama dengan separuh lebar atau tinggi elemen.

Dengan melaraskan lebar dan ketinggian elemen serta nilai atribut jejari sempadan, kita juga boleh mencipta bulatan pelbagai saiz.

.small-circle {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  border-radius: 50%;
}

.big-circle {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 50%;
}

Contoh ini menunjukkan kaedah asas menggunakan sifat jejari sempadan untuk mencapai bulatan, tetapi jika kita perlu melaksanakan bentuk yang lebih kompleks, kita perlu menggunakan sifat laluan klip.

Gunakan atribut clip-path untuk mencapai bulatan

Atribut clip-path dalam CSS3 boleh mentakrifkan bentuk asas untuk klip sebahagian atau semua elemen. Dengan menentukan bentuk asas bulat, anda boleh mencapai kesan bulat.

Berikut ialah kod untuk melaksanakan bulatan menggunakan atribut clip-path:

.circle {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  clip-path: circle(50% at 50% 50%);
}

Dalam contoh ini, kami menggunakan fungsi circle() untuk mentakrifkan bentuk asas bulatan Ini fungsi menerima Tiga parameter: jejari, kedudukan mendatar pusat bulatan dan kedudukan menegak pusat bulatan. Dalam contoh ini, jejari ditetapkan kepada 50%, dan kedudukan mendatar dan menegak pusat bulatan adalah 50%, supaya unsur segi empat sama boleh dipangkas menjadi bulatan.

Perlu diambil perhatian bahawa pada masa ini atribut clip-path tidak disokong oleh semua penyemak imbas arus perdana Jika kita perlu serasi dengan semua penyemak imbas, kita juga perlu menggunakan atribut -webkit-clip-path. Kernel Webkit agar serasi dengan beberapa versi pelayar lama.

.circle {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

Melalui penggunaan fleksibel atribut laluan klip, kita juga boleh mencapai pelbagai bentuk kesan, seperti berbentuk hati, segi tiga, pentagon, dsb.

Ringkasan

Dalam standard CSS3, dengan menggunakan atribut jejari sempadan dan atribut laluan klip, kita boleh mencapai pelbagai kesan bentuk dengan mudah. Antaranya, atribut jejari sempadan boleh digunakan untuk mencapai kesan bulat asas, manakala atribut laluan klip boleh digunakan untuk mencapai bentuk yang lebih kompleks. Dengan menggunakan atribut ini secara rasional, kami boleh mencipta kesan visual yang lebih ekstrem dalam reka bentuk web dan meningkatkan keindahan dan kebolehgunaan halaman.

Atas ialah kandungan terperinci CSS3 merealisasikan bulatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!