Bagaimanakah Saya Boleh Mencipta Jejari Sempadan Inset Hanya Menggunakan CSS3?

Mencipta Jejari Sempadan Inset dengan CSS3

Secara tradisinya, mencipta sempadan inset memerlukan imej atau elemen tambahan. Walau bagaimanapun, CSS3 menyediakan penyelesaian inovatif menggunakan kecerunan.

CSS cerdik Lea Verou mencadangkan penggunaan kecerunan jejari lutsinar yang diletakkan di penjuru elemen. Kecerunan ini meniru lengkung, memberikan ilusi jejari sempadan sisipan.

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

Kaedah ini bergantung pada sokongan penyemak imbas untuk kecerunan dan rgba, jadi pertimbangkan untuk menggunakan sandaran berasaskan imej untuk penyemak imbas yang lebih lama.

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