Bagaimana untuk mencapai kesan pekeliling dalam css

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk reka bentuk web yang boleh mengawal gaya dan reka letak dalam dokumen HTML. Dalam pembangunan web, pelbagai kesan visual boleh dicapai menggunakan CSS, termasuk kesan bulat.

Terdapat banyak cara untuk mencapai bulatan, termasuk menggunakan atribut jejari sempadan, menggunakan elemen pseudo dan menggunakan SVG. Di bawah ini kami akan memperkenalkan beberapa kaedah asas untuk mencapai kalangan CSS.

1. Gunakan sifat jejari sempadan

Sifat jejari sempadan CSS boleh menukar elemen segi empat sama menjadi bulatan dengan menetapkan jejari sudut elemen kepada 50% Ini akan mengubah elemen menjadi bulatan. Contohnya, kod berikut menukarkan elemen div menjadi bulatan:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Kod ini menukar elemen div dengan lebar dan ketinggian 100 piksel menjadi bulatan.

jejari sempadan juga boleh digunakan untuk mencipta elips dengan menetapkan dua sifat jejari kepada jejari mendatar dan menegak masing-masing.

.ellipse {
  width: 150px;
  height: 100px;
  border-radius: 50% 25% / 50% 25%;
}

Kod ini menukarkan elemen div dengan lebar 150 piksel dan ketinggian 100 piksel menjadi bujur. Jejari mengufuk ialah 50% dan jejari menegak ialah 25%.

2. Menggunakan elemen pseudo

elemen pseudo CSS (::sebelum dan ::selepas) boleh digunakan untuk mencipta bulatan dan meletakkannya di suatu tempat pada elemen. kedudukan. Contohnya, kod berikut boleh menetapkan elemen pseudo ke dalam bulatan dengan jejari 50%:

.circle {
  position: relative;
  width: 100px;
  height: 100px;
}

.circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

Kod ini menukar elemen div dengan lebar dan tinggi 100 piksel menjadi bulatan dengan bulatan Bentuk pseudo-elemen bulatan.

3. Menggunakan SVG

SVG (Grafik Vektor Boleh Skala) ialah format grafik vektor yang boleh digunakan untuk pembangunan web. Kalangan boleh dibuat dengan mudah menggunakan SVG sambil mengawal saiz dan warna grafik.

Kod berikut menunjukkan cara membuat bulatan jejari 50 piksel menggunakan SVG:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"/>
</svg>

Kod ini akan mencipta elemen SVG dengan saiz kotak pandangan 100×100, mengandungi A bulatan dengan jejari 50. Atribut cx dan cy mentakrifkan lokasi pusat bulatan.

Tidak seperti CSS, SVG ialah format grafik vektor dan oleh itu boleh diskalakan tanpa herotan. SVG juga boleh digayakan menggunakan gaya CSS, seperti menetapkan warna dan bayang bulatan, dsb.

Ringkasan:

Di atas ialah beberapa cara untuk menggunakan CSS untuk mencapai bulatan. Dalam pembangunan web, kesan visual boleh dibuat dengan mudah menggunakan kaedah ini dan boleh digayakan mengikut kehendak. Kaedah yang berbeza sesuai untuk senario yang berbeza, dan pembangun harus memilih kaedah yang paling sesuai untuk mereka.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan pekeliling dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!