Bagaimanakah Saya Boleh Membuat Sempadan Separuh Lutsinar Tanpa Menjejaskan Kelegapan Elemen?

Bolehkah Ketelusan Sempadan CSS tanpa Mempengaruhi Kelegapan Elemen?

Sifat kelegapan sempadan tidak wujud dalam CSS. Ini menimbulkan persoalan tentang cara mencipta sempadan separa lutsinar tanpa kekurangan kandungan unsur lutsinar.

Penyelesaian Menggunakan Format Warna rgba

Format warna rgba() membenarkan untuk warna lutsinar. Berikut ialah contoh mencipta sempadan legap 50%:

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 */
}

Pendekatan ini memastikan ketelusan sempadan tidak menjejaskan kelegapan kandungan elemen.

Pendekatan Alternatif untuk Lebih Lama Pelayar

Untuk penyemak imbas yang tidak menyokong rgba (cth., IE8 dan lebih lama), penyelesaian dua sempadan boleh digunakan:

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 */
}

Sempadan pertama memberikan kelegapan palsu, manakala sempadan kedua mentakrifkan sempadan sebenar dengan ketelusan yang diingini. Penyemak imbas moden akan mengabaikan sempadan pertama, manakala penyemak imbas lama akan menggunakannya untuk mencontohi ketelusan.

Harta Klip Latar Belakang

Untuk memastikan sempadan kekal telus walaupun apabila warna latar belakang pepejal digunakan, klip latar belakang: kotak padding; harta telah ditambah kepada contoh. Ini menghalang latar belakang daripada menjejaskan ketelusan sempadan.

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