Bagaimana untuk membuat kesan kotak bertitik sejuk dari butang muat naik menggunakan CSS sahaja?

CSS tulen mencipta kesan kotak bertitik sejuk dari butang muat naik! Katakan selamat tinggal kepada gambar dan JavaScript, anda boleh mencapainya dengan hanya kod CSS! Artikel ini akan menunjukkan cara menggunakan kecerunan linear CSS untuk mencipta gaya butang muat naik yang unik, kesannya seperti yang ditunjukkan dalam imej contoh.

Ramai pemaju ingin merancang penampilan yang lebih menarik untuk butang muat naik. Kaedah tradisional biasanya bergantung pada imej atau kod JavaScript yang kompleks, tetapi sebenarnya, kita dapat dengan mudah mencapai kesan yang sama dengan bijak menggunakan atribut linear-gradient CSS.

Rahsia itu adalah untuk menguasai dua kecerunan linear dengan mahir. Dengan menyesuaikan arah kecerunan, saiz dan pengulangan, kita boleh mensimulasikan kesan visual bingkai bertitik. Kod CSS berikut menunjukkan pelaksanaan tertentu:

 label {
  paparan: blok;
  lebar: 80px;
  Ketinggian: 80px;
  Sempadan: 1px Dashed #CCC;
  Latar Belakang: Pusat Linear-Gradient (#CCC, #CCC)/40PX 4PX tidak berulang,
              Linear-Gradient (#CCC, #CCC) Pusat/4PX 40PX NO-REPEAT;
}

Tafsiran Kod:

• Sifat width dan height menentukan saiz butang.
• Harta border menetapkan sempadan bertitik.
• Harta background adalah teras, yang menonjolkan dua kecerunan linear:
  • linear-gradient(#ccc, #ccc) center/40px 4px no-repeat : Buat garis putus-putus pendek dalam arah mendatar.
  • linear-gradient(#ccc, #ccc) center/4px 40px no-repeat : Buat garis putus-putus pendek dalam arah menegak. Kedua-duanya menggabungkan untuk membentuk bingkai bertitik seperti grid.
  • center/40px 4px dan center/4px 40px mengawal saiz dan kedudukan kecerunan, dengan itu mengawal panjang dan jarak garis putus -putus.

Anda boleh menyesuaikan width , height dan nilai warna (seperti #ccc ) seperti yang diperlukan untuk menyesuaikan saiz dan penampilan butang. Dengan mengubahsuai parameter linear-gradient , anda boleh menyempurnakan kesan garis putus-putus, seperti menyesuaikan ketebalan dan jarak garis putus-putus.

Atas ialah kandungan terperinci Bagaimana untuk membuat kesan kotak bertitik sejuk dari butang muat naik menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!