Bagaimana Mengubah Border Dashed dengan CSS

Sempadan yang dihiasi boleh menghiasi sebarang unsur di halaman, tetapi sempadan CSS adalah terhad apabila ditekan. Pemaju kerap datang dengan penyelesaian seperti sempadan CSS-gradient, sempadan SVG, pelbagai sempadan dan banyak lagi untuk meniru dan menaik taraf rupa sempadan kotak dan animasinya.

Hari ini kita akan melihat hack yang lebih mudah untuk sempadan putus-putus: animasi sempadan yang putus-putus. Had sempadan animasi akan dibuat menggunakan sahaja garis besar dan kotak-bayang, tidak meninggalkan kekecohan tentang pemulihan, kerana garis besar disokong dari IE8 dan seterusnya. Dengan cara ini pengguna masih dapat melihat sempadan tidak seperti ketika SVG atau kecerunan digunakan. Dengan ini, anda juga boleh mencipta corak bicolored. Mari kita lihat.

Mewujudkan Borders

Kami akan mula mencipta sempadan. Untuk ini, kami akan menggunakan garisan putus-putus dan bayangan kotak.

 .spanduk garis besar: 6px berlari kuning; box-shadow: 0 0 0 6px # EA3556; ...

Lihat sempadan CSS Penanda - garisan & kotak bayangan oleh Preethi (@rpsthecoder) pada CodePen.

The garis besar akan memerlukan semua nilainya; lebar, jenis dan warna. The kotak-bayang hanya memerlukan nilai untuk tersebar yang sepatutnya sama dengan lebar garisan dan warnanya. Kedua-dua garis besar dan bayang-bayang bersama-sama akan mewujudkan kesan dua jalur berwarna.

Anda boleh melaraskan lebar atau ketinggian kotak untuk melihat sempadan yang dikehendaki di sudut.

Mengubah Borders

Untuk contoh animasi pertama kami, kami akan menambahkan animasi keyframe CSS kepada satu set sepanduk dengan sempadan menghidupkan terus menerus, mendapat perhatian. Untuk kesan animasi, kami hanya akan menukar warna bingkai dan kotak bayang.

@keyframes animateBorder to outline-color: # EA3556; box-shadow: 0 0 0 6px yellow;

Anda boleh menyasar warna garis besar menggunakan garis warna harta rampasan, walau bagaimanapun untuk kotak bayangan anda perlu memberikan semua nilai kepada harta rampasan untuk masa sekarang.

Setelah animasi siap, tambahkannya ke kotak.

.spanduk garis besar: 6px berlari kuning; box-shadow: 0 0 0 6px # EA3556; animasi: 1s animateBarang tanpa had; ...

Lihat animasi sempadan CSS Penahan Dashed oleh Preethi (@rpsthecoder) pada CodePen.

Peralihan di sempadan

Untuk contoh peralihan, kami akan menambahkan sempadan kepada gambar dan menghidupkannya pada hover. Anda juga boleh menukar saiz sempadan untuk kesan yang berbeza.

.gambar garis besar: 20px putus-putus # 006DB5; kotak-bayang: 0px 0px 0px 20px # 3CFDD3; peralihan: semua 1s; ... .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5;

Sekarang, tuding pada imej ini untuk melihat sempadan CSS anda memusnahkan dalam semua kemuliaan animasinya.

Lihat Pen CSS dimulakan peralihan sempadan oleh Preethi (@rpsthecoder) pada CodePen.

Dan, itu satu bungkus. Anda boleh cuba menggantikan sempadan yang putus-putus dengan orang-orang yang bertitik, tetapi kesannya mungkin tidak baik. Anda juga boleh menukar jenis garisan semasa animasi untuk beberapa kesan lagi.