Bagaimana untuk Mencipta Elemen Berbentuk Gelombang Lancar dengan Sempadan dan Latar Belakang dalam CSS3?

Melaksanakan Elemen Berbentuk Gelombang dengan CSS3

Dalam percubaan untuk mencipta elemen berbentuk gelombang menggunakan Bentuk CSS3, anda mungkin pernah mengalami had dalam mengakses sifat sempadan dan latar belakang. Untuk mencapai bentuk gelombang yang lancar dengan sempadan dan latar belakang, pertimbangkan untuk menggantikan elemen div (".panel") dengan SVG.

Penyelesaian

Menggunakan SVG membolehkan anda untuk bentuk gelombang menggunakan elemen "laluan". Untuk mencipta bentuk gelombang:

1. Tentukan koordinat laluan menggunakan atribut "d".
2. Tetapkan atribut "fill" untuk warna latar belakang dan atribut "stroke" untuk sempadan.
3. Laraskan atribut "lebar lejang" untuk mengawal ketebalan jidar.
4. Letakkan Elemen SVG menggunakan sifat "terapung" untuk mencapai reka letak yang diingini.

Kod Contoh

`

Ini ialah panel
`

Kedudukan

Untuk memastikan elemen berbentuk gelombang menindih kandungan, tetapkan "z-index" negatif untuk bekas elemen:

``

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Elemen Berbentuk Gelombang Lancar dengan Sempadan dan Latar Belakang dalam CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!