Rumah  >  Artikel  >  jejari sempadan

jejari sempadan

百草
百草asal
2023-08-03 13:39:364629semak imbas

border-radius ialah sifat CSS yang digunakan untuk mencipta kesan bulat untuk sempadan elemen HTML Dengan menetapkan sifat jejari sempadan sesuatu elemen, anda boleh melaraskan bucu elemen untuk menjadikannya kelihatan bulat, bujur atau lain-lain. bentuk tersuai. Mentakrifkan sempadan bentuk.

jejari sempadan

border-radius ialah sifat CSS yang digunakan untuk mencipta kesan bulat untuk sempadan elemen HTML. Dengan menetapkan sifat jejari sempadan elemen, anda boleh melaraskan bucu elemen untuk memberikannya sempadan berbentuk bulat, elips atau tersuai lain. Atribut

border-radius boleh digunakan pada mana-mana elemen HTML, termasuk div, butang, imej, dsb. Apabila menggunakan jejari sempadan, anda boleh mengawal sudut bulat sempadan dengan menetapkan satu atau lebih nilai. Nilai ini boleh menjadi piksel (px), peratusan (%) atau pembahagi (digunakan untuk pengiraan berbanding saiz elemen). Sintaks atribut

border-radius adalah seperti berikut:

border-radius: value1 value2 value3 value4;

di mana nilai1, value2, value3 dan value4 mewakili jejari sudut sudut kiri atas, sudut kanan atas, bawah sudut kanan dan sudut kiri bawah masing-masing. Jika anda menetapkan kurang daripada empat nilai, nilai akan digunakan semula mengikut urutan untuk menetapkan sudut yang tinggal.

Jika anda menetapkan hanya satu nilai, jejari fillet empat penjuru akan sama. Contohnya:

border-radius: 10px; // Jejari sudut semua sudut ialah 10px

Jika anda menetapkan dua nilai, maka nilai pertama akan digunakan pada sudut kiri atas dan kanan bawah, dan nilai kedua akan digunakan pada sudut kanan atas dan sudut kiri bawah. Contohnya:

jejari sempadan: 10px 20px; // Jejari sudut sudut kiri atas dan sudut kanan bawah ialah 10px, dan jejari sudut atas sudut kanan dan sudut kiri bawah ialah 20px

Jika anda menetapkan tiga nilai, maka nilai pertama akan digunakan pada sudut kiri atas, nilai kedua akan digunakan pada sudut kanan atas dan kiri bawah, dan nilai ketiga akan digunakan pada sudut kanan bawah. Contohnya:

border-radius: 10px 20px 30px; // Jejari sudut penjuru kiri atas ialah 10px, jejari penjuru kanan atas dan sudut kiri bawah ialah 20px, dan jejari penjuru kanan sebelah bawah ialah 30px

Atribut

border-radius juga Menyokong menyatakan peratusan dan pembahagi sebagai nilai. Nilai ini akan mengira jejari sudut secara berkadar berbanding saiz elemen. Contohnya:

jejari sempadan: 50% 25% 75% 10%; // Jejari fillet di sudut kiri atas ialah 50% daripada lebar elemen, jejari fillet di sudut kanan atas ialah 25% daripada elemen ketinggian, dan jejari fillet di sudut kanan bawah ialah 75% daripada lebar elemen, dan jejari sudut sudut kiri bawah ialah 10% daripada ketinggian elemen

Selain menentukan nilai yang tepat, atribut jejari sempadan boleh juga menggunakan nilai khas untuk membuat sempadan bulat atau elips. Contohnya:

jejari sempadan: 50%; // Cipta sempadan bulat dengan jejari sudut bulat sebanyak 50% daripada lebar elemen

Ringkasnya, jejari sempadan ialah kaedah yang digunakan untuk menetapkan kesan sudut bulat bagi sempadan unsur HTML. Ia boleh mengawal jejari fillet sudut dengan menetapkan satu atau lebih nilai, dan juga menyokong pengiraan relatif menggunakan peratusan atau pembahagi. Menggunakan jejari sempadan boleh menjadikan reka bentuk web anda lebih cantik dan meningkatkan daya tarikan visual elemen.

Atas ialah kandungan terperinci jejari sempadan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn