Bagaimanakah Saya Boleh Mensimulasikan Jejari Sempadan Inset Menggunakan Kecerunan CSS3?

Simulasi Inset Border-Radius dengan CSS3 Gradient

Mencapai kesan inset border-radius semata-mata dengan CSS3 menimbulkan cabaran. Walau bagaimanapun, dengan menggunakan kecerunan CSS3, anda boleh mensimulasikan kesan yang diingini.

Penyelesaian Kecerunan Lea Verou

Lea Verou mencipta penyelesaian inovatif yang menggunakan empat kecerunan jejari lutsinar yang diletakkan pada kedudukan bertentangan sudut-sudut elemen.

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;
}

Kecerunan ini mencipta set lengkung lutsinar yang menyerupai jejari sempadan sisipan. Anda boleh melaraskan warna dan jejari untuk mencipta gaya yang berbeza.

Sokongan dan Sandaran Penyemak Imbas

Teknik ini bergantung pada sokongan untuk RGBA dan kecerunan, yang tidak disokong pada yang lebih lama pelayar, terutamanya Internet Explorer. Oleh itu, adalah penting untuk menggunakan penyelesaian ini sebagai peningkatan progresif atau menyediakan sandaran berasaskan imej untuk penyemak imbas lama.

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