Bagaimanakah Saya Boleh Mencipta Kesan Garis Besar Bulat pada Elemen Div?

Mensimulasikan Garis Besar Bulat pada Elemen Div

Walaupun sifat jejari sempadan membenarkan sudut bulat pada sempadan elemen div, ia tidak memberikan penyelesaian untuk garis besar bulat.

Walau bagaimanapun, penyelesaian yang bijak wujud menggunakan sifat kotak-bayang. Contoh berikut menunjukkan cara mencipta kesan garis besar yang licin dan 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, sifat bayang kotak mencipta bayang halus di sekeliling medan input. Dengan menetapkan jejari hamparan kepada sifar, bayang-bayang dikekang ke tepi elemen, mewujudkan kesan seperti garis besar.

Kelas text1 dan text2 menyesuaikan lagi garis besar dengan menukar jejari dan warna hamparan, menghasilkan sama ada dalam bentuk garis halus atau keras.

Teknik ini menyediakan penyelesaian yang fleksibel dan elegan untuk mencapai garis besar bulat pada elemen div.

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