Bagaimanakah Saya Boleh Membuat Sempadan Separuh Lutsinar dalam CSS?

Bolehkah CSS Menawarkan Kawalan Kelegapan Sempadan Elemen?

Menetapkan kelegapan khusus untuk sempadan elemen dalam CSS mungkin kelihatan seperti tugas yang mudah, tetapi sifat kelegapan sempadan standard tidak wujud. Ini memberikan cabaran: bagaimana untuk mencapai sempadan separa lutsinar tanpa menggunakan imej?

Format Warna rgba untuk Penyelamat

Nasib baik, format warna rgba boleh memberikan penyelesaian yang berdaya maju. Format ini membenarkan menentukan nilai merah, hijau, biru dan alfa (kelegapan) untuk sesuatu warna. Untuk mencipta sempadan merah dengan kelegapan 50%, contohnya, gunakan kod berikut:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Kod ini mencipta sempadan merah separa lutsinar di sekeliling elemen. Sifat -webkit-background-clip dan background-clip membantu mengekalkan ketelusan sempadan walaupun apabila warna latar belakang yang kukuh digunakan.

Fallback Solution untuk Penyemak Imbas Lama

Untuk penyemak imbas yang tidak menyokong rgba (IE8 dan lebih lama), penyelesaian melibatkan penggunaan dua pengisytiharan sempadan. Pengisytiharan pertama menetapkan kelegapan palsu, manakala yang kedua menggunakan kelegapan sebenar. Penyemak imbas yang mampu menggunakan rgba akan mengutamakan pengisytiharan kedua, manakala penyemak imbas yang lebih lama akan berundur kepada yang pertama.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Penyelesaian ini memberikan pengalaman sempadan separa telus yang konsisten merentas penyemak imbas yang berbeza, termasuk yang mendahului sokongan rgba.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Separuh Lutsinar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!