Tujuan manual ini adalah untuk menerangkan cara membuat sempadan sudut bulat. Untuk ini, pertama, kita mesti tahu tentang ' sempadan ” harta benda. Jadi, mari kita mulakan!
Apakah Harta 'sempadan' dalam CSS?
Untuk membuat sempadan di sekeliling elemen, anda perlu menggunakan ' sempadan ” harta benda. Dengan menggunakan harta ini, anda boleh menetapkan ' gaya ”, “ warna ”, dan “ lebar ” sempadan.
Sintaks
Sintaks harta sempadan diberikan sebagai:
sempadan : warna gaya lebar
Berikut ialah perihalan nilai yang diberikan di atas:
- lebar: Ia digunakan untuk menetapkan lebar sempadan.
- gaya: Ia digunakan untuk menetapkan gaya sempadan, seperti bertitik, putus-putus, pepejal atau berganda.
- warna: Ia menentukan warna sempadan.
Berikut adalah contoh di mana kami melaksanakan ' sempadan ” harta benda.
Bagaimana untuk membuat sempadan menggunakan CSS?
Untuk membuat sempadan, pertama, tambahkan elemen dalam fail HTML. Untuk berbuat demikian, kami akan mencipta
dan
:
< badan >
< div kelas = 'sudut' >
< h1 > Petunjuk Linux < / h1 >
< hlm > Sudut bulat dalam CSS < / hlm >
< / div >
< / badan >
Seterusnya, kita akan beralih ke bahagian CSS.
Di sini, ' .sudut ” digunakan untuk mengakses kelas yang diberikan kepada
.sudut {
sempadan : 4px padu rgb ( 248 , 6 , 107 ) ;
lebar : 250px ;
ketinggian : 150px ;
warna latar belakang : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Sebaik sahaja anda telah melaksanakan kod yang disebutkan di atas, pergi ke fail HTML dan laksanakannya. Anda akan melihat hasil berikut:
Sekarang, kita akan beralih ke bahagian seterusnya, di mana kita akan mencipta sempadan segi empat sama ke sempadan sudut bulat.
Bagaimana untuk Sudut Bulat Menggunakan CSS?
Untuk membuat sempadan sudut bulat, ' jejari sempadan ” hartanah sedang digunakan, di mana anda boleh menetapkan jejari sudut mengikut keutamaan anda.
Sintaks
Sintaks sifat jejari sempadan diberikan di bawah:
jejari sempadan : nilaiMari kita teruskan contoh sebelumnya dan tetapkan jejari sempadan untuk mencapai sudut bulat.
Contoh
dalam ' .sudut ” kelas fail CSS, tetapkan nilai “ jejari sempadan ” harta sebagai “ 30px ”:
jejari sempadan : 30px ;Dengan baris di atas ditambah, anda akan mendapat output berikut:
Output yang diberikan di atas menandakan bahawa sempadan berjaya ditukar menjadi sudut bulat kerana sifat jejari sempadan.
Kesimpulan
Dalam CSS ' jejari sempadan ” harta digunakan untuk menukar sudut sempadan. Bentuk lengkung berubah mengikut nilai jejari yang diberikan. Menggunakan harta yang disebutkan, anda boleh menetapkan jejari sudut mengikut pilihan anda. Dalam artikel ini, kami telah menerangkan cara untuk mengelilingi sempadan sudut menggunakan sifat jejari sempadan dengan bantuan contoh.