Bagaimanakah Saya Boleh Membuat Sempadan Melengkung dengan Hujung Bulat Menggunakan CSS?

CSS Lengkung Sempadan: Mencipta Tepi Lengkung dengan Bulatan

Dalam reka bentuk web, selalunya perlu mencipta sempadan atau tepi melengkung untuk meningkatkan estetika daripada halaman. Satu cabaran biasa ialah mencipta bulatan dengan hujung melengkung, seperti yang ditunjukkan dalam imej yang disediakan.

Cabaran: Mencapai Sempadan Bulat dengan Hujung Melengkung

Mencapai kesan yang diingini dalam CSS boleh menjadi rumit. Menggunakan jejari sempadan sahaja akan menghasilkan bentuk separuh bulatan, bukan lengkung dengan hujung yang memanjang.

Penyelesaian: Memanfaatkan SVG sebagai Latar Belakang

Untuk mencipta sempadan dengan hujung melengkung dalam CSS, kita boleh menggunakan SVG (Grafik Vektor Boleh Skala). SVG membolehkan kami mentakrifkan bentuk kompleks menggunakan kod XML.

Kod:

.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;
}

Penjelasan:

• Kami mencipta kelas kontena .bar bawah untuk mewujudkan warna latar belakang, kedudukan dan ketinggian.
• Kami mentakrifkan kelas .bulatan untuk mewakili bulatan.
• Kami menetapkan atas: -28px untuk meletakkan bulatan sedikit di atas bar bawah.
• Sifat latar belakang menggunakan URI data untuk membenamkan imej SVG sebagai latar belakang. Laluan SVG mentakrifkan bentuk dengan hujung melengkung.
• Kami menentukan dimensi dan jidar mendatar untuk bulatan.

Faedah Menggunakan SVG:

• SVG ialah grafik vektor, yang bermaksud ia bebas resolusi dan boleh berskala tanpa kehilangan kualiti.
• Mereka memberikan fleksibiliti yang lebih besar dalam mencipta bentuk yang kompleks berbanding dengan sifat CSS sahaja.
• SVG boleh disepadukan dengan mudah ke dalam kod HTML dan CSS.

Dengan menggunakan SVG sebagai latar belakang, kami boleh mencapai sempadan melengkung yang diingini dengan hujung bulat dengan berkesan, meningkatkan daya tarikan visual reka bentuk web kami.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Melengkung dengan Hujung Bulat Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!