Latar Belakang CSS Checkerboard ... tetapi dengan sudut bulat dan gaya hover

Walau bagaimanapun, mencapai sudut bulat tanpa menggunakan kecerunan CSS yang kompleks boleh mencabar. Artikel ini membentangkan penyelesaian kreatif menggunakan helah pintar dengan SVG Glyphs.

Pada mulanya, saya berjuang untuk mengelilingi sudut corak asas. Kemudian, saya teringat fleksibiliti titik peluru glyph (✦) dan menyedari bahawa overlaying pada setiap persimpangan boleh membuat kesan bulat yang dikehendaki.

55px), mengulangi-linear-gradien (ke bawah, telus, 50px telus, 50px putih, 55px putih), gradien linear (45deg, merah jambu, skyblue); / * Lebih banyak gaya */}

Kod ini menghasilkan corak kuadrat yang berulang, beralih dari merah jambu ke langit, dengan jurang putih 5px. Fungsi berulang-linear-gradient mencipta jalur putih mendatar dan menegak, yang, apabila berlapis, membentuk papan semak. Kecerunan ketiga memberikan warna mengisi.

Untuk menambah sudut bulat, kami melapisi Glyph Point Bullet menggunakan svg yang dikodkan:

div {latar belakang: Ulang kiri -17px url -22px/55px 55px xmlns = 'http: //www.w3.org/2000/svg'> ✦ 50px, putih 55px), gradien linear (45deg, merah jambu, skyblue); / * More Style */}

The Repeat Kata kunci menunjukkan imej latar belakang yang mengulangi. kiri -17px top -22px/55px 55px menetapkan kedudukan dan saiz setiap unit berulang, dengan berhati -hati diimbangi untuk menyelaraskan dengan persimpangan grid. SVG mengandungi elemen HTML memaparkan glyph; ITS secara langsung mempengaruhi jejari sudut persegi. SVG yang diperluas kelihatan seperti ini:

255 / 0.5) 50px, RGB (255 255 255 / 0.5) 55px), mengulangi-linear-gradien (ke bawah, telus, telus 50px, RGB (255 255 / 0.5) 50px, RGB (255 255 255 / 0.5; box-shadow: 10px 10px 20px merah jambu; }

Ini menghilangkan glyph pada hover dan menjadikan garis putih separuh telus menggunakan rgb () dengan ketelusan alfa. A box-shadow menambah kesan halus.

Teknik ini menyediakan cara yang kreatif dan berkesan untuk mencapai corak papan semak yang dibulatkan dengan CSS, menawarkan fleksibiliti untuk pelbagai gaya interaktif. Saya mengalu -alukan pendekatan alternatif dalam komen!

Atas ialah kandungan terperinci Latar Belakang CSS Checkerboard ... tetapi dengan sudut bulat dan gaya hover. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!