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

Membuat Sempadan Melengkung dengan Hujung Bulat Menggunakan CSS dan SVG

Apabila membina tapak web, adalah perkara biasa untuk menemui butiran reka bentuk yang memerlukan penyelesaian kreatif . Satu perincian sedemikian ialah penciptaan sempadan bulat dengan hujung melengkung.

Masalah:
Seorang pereka web sedang bergelut untuk mencapai sempadan bulat dengan hujung melengkung menggunakan CSS. Mereka telah cuba mencapai ini menggunakan sudut bulat, tetapi ia tidak menghasilkan bentuk yang diingini.

Penyelesaian:
Untuk mencipta sempadan melengkung dengan hujung bulat, kita boleh menggunakan Vektor Boleh Skala Grafik (SVG) sebagai latar belakang. SVG membolehkan penciptaan bentuk dan lengkung tersuai, memberikan lebih fleksibiliti dan kawalan ke atas reka bentuk.

Untuk mencapai bentuk yang diingini, kami akan mencipta elemen SVG tersuai yang menyerupai separuh bulatan berbentuk bulan sabit. Berikut ialah contoh:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="10 10 45 15" width="64" height="64" fill="#29a7e8">
  <path d="M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z"></path>
</svg>

SVG ini mentakrifkan laluan yang bermula dengan garis mendatar, kemudian beralih ke lengkung ke bawah. Dengan menggunakan CSS, kami kemudiannya boleh menetapkan SVG ini sebagai latar belakang elemen yang kami mahu mempunyai sempadan melengkung.

Berikut ialah kod CSS yang dikemas kini:

.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"></path></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

Dengan menggabungkan bentuk SVG tersuai dengan sifat latar belakang CSS, kita boleh mencipta sempadan bulat dengan hujung melengkung yang meniru reka bentuk yang diingini.

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