Bagaimanakah Saya Boleh Membuat Garis Besar Bulat untuk Div?

Bolehkah Anda Menggariskan Div dengan Sudut Bulat?

Sama seperti sifat jejari sempadan, adalah mungkin untuk memberikan elemen div garis besar bulat. Walaupun anda mungkin fikir sifat jejari sempadan boleh melakukan silap mata, terdapat alternatif yang menawarkan lebih kawalan: bayangan kotak.

Sebagai contoh, jika anda mempunyai medan input dengan sempadan bulat dan ingin melaraskan fokus warna garis besar, bayangan kotak boleh digunakan. Ia memberikan rupa yang licin sambil juga membenarkan simulasi garis besar bulat. Begini cara anda boleh mencapai kesan ini:

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;
}

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