Bagaimanakah Saya Boleh Membuat Jejari Sempadan Inset Menggunakan Kecerunan CSS3?

Sisipkan Jejari Sempadan Menggunakan Kecerunan CSS3

Mencapai jejari sempadan sisipan tanpa imej boleh dilakukan melalui penggunaan kecerunan CSS3. Pendekatan ini melibatkan lapisan beberapa kecerunan jejari lutsinar untuk mencipta ilusi sempadan melengkung ke dalam di sekeliling elemen.

Kod CSS berikut menggunakan penyelesaian Lea Verou untuk mencipta jejari sempadan sisipan menggunakan kecerunan:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Dalam kod ini, berbilang kecerunan jejari lutsinar diletakkan pada titik tertentu di sekeliling elemen untuk mencipta ilusi lengkung ke dalam. Hasilnya ialah satu set kecerunan lutsinar dengan lengkung, menghasilkan kesan jejari sempadan sisipan.

Perlu ambil perhatian bahawa penyelesaian ini memerlukan sokongan untuk RGBA dan kecerunan, yang mungkin tidak disokong oleh semua penyemak imbas lama dan memerlukan peningkatan progresif atau sandaran berasaskan imej untuk penyemak imbas lama yang tidak menyokong kecerunan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Jejari Sempadan Inset Menggunakan Kecerunan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!