Bagaimana untuk mencapai kesan jurang pada susun atur kad dan kupon dengan latar belakang kecerunan?

CLEVERLY Gunakan topeng CSS untuk membuat kesan jurang baucar kad latar belakang kecerunan

Dalam reka bentuk, menambah kesan takik kepada kupon kad, terutamanya jurang dalam latar belakang kecerunan, sering menjadi cabaran. Artikel ini akan memperkenalkan secara terperinci bagaimana menggunakan atribut mask CSS untuk dengan mudah mencapai kesan ini.

Teka -teki Reka Bentuk: Jurang kupon kad di bawah latar belakang kecerunan

Sekiranya latar belakang kupon kad adalah pepejal, anda boleh dengan mudah mencapai jurang dengan langsung menutupnya dengan warna pepejal. Tetapi latar belakang kecerunan tidak berlaku, dan topeng mudah akan memusnahkan kesan kecerunan. Oleh itu, terdapat keperluan untuk kaedah untuk "menggali" jurang dengan tepat sambil mengekalkan kecerunan.

Penyelesaian: Properties topeng CSS

Atribut mask CSS adalah kunci untuk menyelesaikan masalah ini. Ia membolehkan kita untuk "menyekat" elemen menggunakan imej atau kecerunan, dengan itu mewujudkan pelbagai kesan matte kompleks yang sesuai untuk reka bentuk notch dalam latar belakang kecerunan.

Coretan kod berikut menunjukkan cara membuat jurang bulat menggunakan kecerunan radial:

 .card {
  -Webkit-Mask: Radial-Gradient (bulatan pada 20px 20px, #0000 20px, telus 0); / * Safari dan krom */
  Mask: Radial-Gradient (bulatan pada 20px 20px, #0000 20px, telus 0); / * Firefox */
}

Kod ini mewujudkan topeng bulat melalui kecerunan radial. #0000 bermaksud hitam hitam (kawasan oklusi), transparent bermaksud telus (kawasan takik). 20px 20px menentukan kedudukan pusat, 20px mengawal radius takik. Dari segi keserasian penyemak imbas, -webkit-mask telah ditambah untuk menyokong Safari dan Chrome.

Pratonton kesan

Selepas memohon kod di atas, jurang bulat akan muncul di sudut kiri atas kupon, sementara latar belakang kecerunan akan tetap utuh.

Alat tambahan

Selain menulis kod CSS secara manual, beberapa alat reka bentuk dalam talian juga boleh membantu dalam reka bentuk kupon kad dan penjanaan jurang. Sebagai contoh, beberapa "pereka kupon" atau "editor grafik" boleh memberikan keupayaan penciptaan notch yang lebih intuitif.

Meringkaskan

Menggunakan atribut mask CSS, kami dapat menambah jurang dengan pelbagai bentuk ke dalam kupon kad latar belakang untuk meningkatkan kesan reka bentuk. Kaedah ini mudah dan mudah digunakan dan dapat mengekalkan penampilan keseluruhan kupon kad.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan jurang pada susun atur kad dan kupon dengan latar belakang kecerunan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!