Bolehkah Elemen Div Mempunyai Sudut Garis Bulat?

Adakah Elemen Div Menampung Sudut Garis Besar Bulat?

Elemen Div tidak mempunyai kapasiti untuk membulatkan sudut garis besar secara eksplisit melalui sifat jejari sempadan. Had ini berpunca daripada garis besar segi empat sama lalai yang mengelilingi elemen boleh fokus dalam banyak penyemak imbas.

Penyelesaian Alternatif: Memeluk Box-Shadow

Untuk mensimulasikan kesan sudut garis besar bulat pada div elemen, pertimbangkan untuk menggunakan bayangan kotak. Dengan menggunakan bayang-bayang kotak dengan dimensi tertentu secara strategik, anda boleh mencipta ilusi garis besar bulat.

Pelaksanaan:

Berikut ialah contoh cara untuk mencapai kelancaran garis besar menggunakan bayangan kotak:

<input class="text1">

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

.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

Untuk kesan "garis besar" yang lebih keras, laraskan dimensi bayang kotak seperti berikut:

.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

Atas ialah kandungan terperinci Bolehkah Elemen Div Mempunyai Sudut Garis Bulat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!