Apakah yang diwakili oleh setiap nilai atribut penjuru bulat css3?

Dalam CSS3, atribut sudut bulat "jejari sempadan" mempunyai 1 hingga 4 nilai atribut Apabila empat nilai atribut ditetapkan, nilai atribut mewakili sudut kiri atas, sudut kanan atas, bawah sudut kanan dan sudut kiri bawah secara bergilir. Nilai atribut sudut bulat, sintaks ialah "jejari sempadan: nilai bulat kiri atas, nilai bulat kanan atas, nilai bulat kanan bawah, nilai bulat kiri bawah".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apakah yang diwakili oleh setiap nilai atribut sudut bulat css3?

jejari sempadan CSS3 - menentukan setiap sudut bulat

atribut jejari sempadan ialah satu dan boleh ditentukan sehingga empat sifat komposit sempadan -*- sifat jejari

Jika anda menetapkan hanya satu nilai dalam sifat jejari sempadan, 4 bucu bulat akan dijana.

Walau bagaimanapun, jika anda ingin menentukan empat sudut satu demi satu, anda boleh menggunakan peraturan berikut:

· Empat nilai: nilai pertama ialah sudut kiri atas, nilai kedua ialah sudut kanan atas, nilai ketiga ialah sudut kanan bawah, dan nilai keempat ialah sudut kiri bawah.

· Tiga nilai: Nilai pertama ialah sudut kiri atas, nilai kedua ialah sudut kanan atas dan sudut kiri bawah, dan nilai ketiga ialah sudut kanan bawah

· Dua nilai: yang pertama Nilai pertama ialah sudut kiri atas dan sudut kanan bawah, nilai kedua ialah sudut kanan atas dan sudut kiri bawah

· Satu nilai: Empat nilai isian adalah sama

Susunan empat nilai ​​​​untuk setiap jejari Ialah: sudut kiri atas, sudut kanan atas, sudut kanan bawah, sudut kiri bawah. Jika sudut kiri bawah ditinggalkan, sudut kanan atas adalah sama. Jika sudut kanan bawah ditinggalkan, sudut kiri atas adalah sama. Jika penjuru kanan sebelah atas ditinggalkan, sudut kiri atas adalah sama.

Contoh 1

border-radius:2em;

bersamaan dengan:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Contoh 2

border-radius: 2em 1em 4em / 0.5em 3em;

bersamaan dengan:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah yang diwakili oleh setiap nilai atribut penjuru bulat css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!