Bagaimanakah Saya Boleh Membuat Sempadan Separuh Lutsinar dalam CSS Tanpa Menggunakan Imej?

Kelegapan untuk Sempadan Unsur dalam CSS

Bolehkah CSS mencapai kesan separa telus untuk sempadan unsur menggunakan sifat seperti kelegapan sempadan: 0.7 ? Walaupun sifat sedemikian tidak wujud, berikut adalah penyelesaian alternatif untuk mencapai kesan ini tanpa menggunakan imej.

Format Warna RGBA

Format warna rgba membenarkan untuk menetapkan kedua-duanya warna dan kelegapan. Contohnya, untuk mencipta sempadan merah dengan kelegapan 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 */
}

Pengisytiharan Dwi Sempadan

Untuk penyemak imbas lama yang tidak menyokong rgba (IE8 dan ke bawah) , anda boleh menyediakan berbilang pengisytiharan sempadan:

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

Pengisytiharan pertama menghampiri sempadan merah legap 50% di atas latar belakang putih, menutup mana-mana grafik di bawahnya.

Pertimbangan Tambahan

Klip latar belakang: kotak padding; harta memastikan bahawa jidar kekal telus walaupun warna latar belakang pepejal digunakan.

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