Bagaimanakah Saya Boleh Mencipta Jejari Sempadan Inset Hanya Menggunakan CSS3?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mencipta Jejari Sempadan Inset Hanya Menggunakan CSS3?

Patricia Arquette

Lepaskan： 2024-12-02 21:03:10

asal

441 orang telah melayarinya

How Can I Create Inset Border-Radius Using Only CSS3?

Sisipkan Jejari Sempadan dengan CSS3

Dalam CSS3, mencapai jejari sempadan sisipan, di mana sudutnya melengkung ke dalam dan bukannya ke luar, boleh menjadi mencabar tanpa menggunakan imej. Walau bagaimanapun, terdapat penyelesaian bijak yang menggunakan kecerunan CSS3.

Pendekatan cerdik Lea Verou melibatkan mencipta satu siri kecerunan telus dengan lengkung, mewujudkan ilusi jejari sempadan sisipan. Dengan meletakkan kecerunan ini dengan tepat, anda boleh mencapai kesan bucu bulat yang diingini.

Kod CSSnya, seperti yang dilihat di bawah, mentakrifkan kelas tersuai untuk elemen dengan jejari sempadan sisipan yang dikehendaki:

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

Salin selepas log masuk

Menggunakan kelas ini pada elemen akan menghasilkan elemen dengan jejari sempadan sisipan. Adalah penting untuk ambil perhatian bahawa teknik ini bergantung pada sokongan untuk rgba dan kecerunan, menjadikannya strategi peningkatan progresif. Untuk penyemak imbas atau penyemak imbas lama yang tidak menyokong kecerunan, sandaran berasaskan imej disyorkan untuk memberikan sokongan.

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!