Bagaimana untuk Mencipta Sempadan Bulat dengan Hujung Melengkung Menggunakan CSS dan SVG?

CSS Lengkung Sempadan: Mencapai Bulatan dengan Hujung Lengkung

Anda menghadapi cabaran dalam mencipta sempadan bulat dengan hujung melengkung dalam CSS. Mari kita menyelami penyelesaian yang menangani keperluan ini.

Kunci untuk mencapai kesan yang diingini terletak pada penggunaan SVG (Grafik Vektor Boleh Skala) sebagai latar belakang untuk sempadan anda. Dengan menggunakan teknik ini, anda boleh mencipta bentuk kompleks dengan mudah dengan tepi melengkung yang lancar.

Begini cara anda boleh melaksanakan penyelesaian:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

Dalam kod di atas, kelas .circle menggunakan sifat latar belakang untuk menentukan URI data SVG. URI ini merujuk imej SVG yang mentakrifkan bentuk melengkung, yang kemudiannya digunakan sebagai latar belakang elemen. Atribut viewBox SVG menetapkan saiz dan kedudukan bentuk dalam ruang SVG, dan elemen laluan mentakrifkan bentuk melengkung itu sendiri.

Dengan melaraskan nilai dalam definisi laluan, anda boleh mengawal kelengkungan dan saiz bentuknya. Anda juga boleh menukar atribut isian untuk menggunakan warna yang berbeza pada jidar.

Teknik ini menawarkan cara yang fleksibel dan berskala untuk mencipta sempadan melengkung dalam CSS, membolehkan anda mencapai kesan yang menarik secara visual dan dinamik dalam reka bentuk web anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sempadan Bulat dengan Hujung Melengkung Menggunakan CSS dan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!