Bagaimana untuk Membuat Sempadan Separuh Telus dalam CSS Tanpa Menggunakan Imej?

Ketelusan Sempadan CSS tanpa Imej

Malangnya, sifat kelegapan sempadan tidak wujud dalam CSS. Walau bagaimanapun, terdapat teknik untuk mencipta sempadan separa lutsinar menggunakan kaedah lain.

Format Warna rgba

Untuk mencipta sempadan separa lutsinar menggunakan rgba, gunakan sintaks berikut :

div {
    border: 1px solid rgba(red, green, blue, opacity);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for modern browsers */
}

Sebagai contoh, sempadan merah dengan kelegapan 50% boleh dibuat menggunakan rgba seperti berikut:

div {
    border: 1px solid rgba(255, 0, 0, .5);
}

Pengisytiharan Dwi Sempadan (untuk pelayar lama)

Untuk penyemak imbas yang tidak menyokong rgba, seperti IE8 dan lebih awal, penyelesaiannya ialah menggunakan dua pengisytiharan sempadan:

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
}

Pengisytiharan pertama memberikan kelegapan palsu, manakala yang kedua menggunakan kelegapan sebenar. Penyemak imbas moden akan mengutamakan pengisytiharan kedua, manakala penyemak imbas lama akan menggunakan yang pertama.

Nota: Klip latar belakang: sifat padding-box ditambahkan untuk memastikan jidar kekal telus apabila latar belakang warna digunakan.

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