Bagaimanakah cara membuat sempadan separa telus dalam CSS?

Cara Mewujudkan Sempadan Separuh Telus dalam CSS

Dalam CSS, menetapkan sifat kelegapan mempengaruhi ketelusan keseluruhan elemen, termasuk teks. Untuk membuat sempadan separa telus, pendekatan mudah tidak tersedia. Walau bagaimanapun, format warna rgba membolehkan anda mencapai kesan ini.

Sebagai contoh, kod berikut menetapkan sempadan merah 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 */
}

Untuk penyemak imbas yang tidak menyokong rgba (IE8 dan lebih awal), strategi sempadan berganda adalah perlu. Sempadan pertama ditetapkan kepada kelegapan palsu, manakala yang kedua mewakili kelegapan yang diingini sebenar:

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 mensimulasikan jidar merah legap 50% di atas putih, menghasilkan kesan yang diingini pada kebanyakan penyemak imbas.

Untuk memastikan jidar kekal telus walaupun dengan warna latar belakang yang kukuh, tambah klip latar belakang: kotak padding; seperti yang ditunjukkan dalam contoh di atas.

Atas ialah kandungan terperinci Bagaimanakah cara membuat sempadan separa telus dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!