Bagaimanakah Saya Boleh Mencipta Garis Besar Bulat untuk Elemen Div Menggunakan Box-Shadow?

Mencipta Garis Besar Bulat untuk Elemen Div dengan Box-Shadow

Menyesuaikan penampilan garis besar elemen div boleh meningkatkan pengalaman pengguna dan estetika visual. Dengan menggunakan sifat bayangan kotak, kami boleh mencapai sudut bulat yang serupa dengan kefungsian jejari sempadan untuk garis besar elemen.

Untuk menggambarkan teknik ini, pertimbangkan senario di mana anda mempunyai medan input dengan sempadan bulat dan keinginan untuk mengubah suai warna garis besar apabila ia menerima fokus. Garis besar segi empat sama konvensional mungkin tidak menarik.

Penyelesaian:

Daripada cuba membundarkan garis besar menggunakan kaedah konvensional, manfaatkan sifat bayang-kotak. Penyelesaian ini menawarkan penampilan yang lebih lancar dan boleh disesuaikan. Dengan memperhalusi tetapan bayang-bayang kotak, kita boleh mencipta garis besar pseudo yang hampir menyerupai garis besar bulat:

  input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
  }

  /* Smooth outline with box-shadow: */
  .text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
  }

  /* Hard "outline" with box-shadow: */
  .text2:focus {
    box-shadow: 0 0 0 2pt red;
  }

Dalam contoh ini, elemen input pada mulanya mempunyai jejari sempadan 2pt, tetapi kotak -sifat bayang menambah bayang kelabu 1pt di sekeliling elemen. Apabila elemen menerima fokus, bayangan kotak meningkat kepada 3pt dengan warna biru bunga jagung untuk garis besar yang lebih lancar. Selain itu, anda boleh membuat garis besar yang lebih jelas dengan menetapkan bayang kotak kepada 0 0 0 2pt merah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Garis Besar Bulat untuk Elemen Div Menggunakan Box-Shadow?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!