Сврха овог приручника је да објасни како да направите ивице заобљених углова. За ово, прво, морамо знати о „ граница ' имовина. Дакле, почнимо!
Шта је „бордер“ својство у ЦСС-у?
Да бисте направили ивицу око елемента, потребно је да користите „ граница ' имовина. Користећи ово својство, можете подесити „ стил ”, “ боја ', и ' ширина ” границе.
Синтакса
Синтакса својства границе је дата као:
граница : ширина стил боја
Ево описа горе наведених вредности:
- ширина: Користи се за подешавање ширине ивице.
- стил: Користи се за постављање стила ивице, као што је тачкаста, испрекидана, пуна или двострука.
- боја: Одређује боју границе.
Ево примера у којем имплементирамо „ граница ' имовина.
Како направити ивицу користећи ЦСС?
Да бисте направили ивицу, прво додајте елемент у ХТМЛ датотеку. Да бисмо то урадили, креираћемо <див> и доделити „ угао ” разред томе. Након тога, додаћемо наслов и пасус помоћу ознака <х1> и <п>:
< тело >
< див класа = 'угао' >
< х1 > Линук наговештај < / х1 >
< стр > Заобљени углови у ЦСС-у < / стр >
< / див >
< / тело >
Затим ћемо прећи на одељак ЦСС.
Овде, „ .угао ” се користи за приступ класи додељеној <див>. Након тога, направићемо ивицу користећи „ граница ” својство и додели вредности ширине, стила и боје као „ 4пк ”, “ чврст ', и ' ргб(248, 6, 107) ', редом. Поред тога, додаћемо ширину „ 250пк “, висина “ 150пк “, и боја позадине “ ргб(234, 0, 255) ” за див:
.угао {граница : 4пк чврст ргб ( 248 , 6 , 107 ) ;
ширина : 250пк ;
висина : 150пк ;
боја позадине : ргб ( 2. 3. 4 , 0 , 255 ) ;
}
Када имплементирате горе наведени код, идите на ХТМЛ датотеку и извршите је. Видећете следећи резултат:
Сада ћемо прећи на следећи део, где ћемо креирати квадратну границу до границе округлог угла.
Како заокружити угао користећи ЦСС?
Да бисте направили ивицу округлог угла, „ граница-радијус ” се користи својство у којем можете подесити радијус угла према вашим жељама.
Синтакса
Синтакса својства радијуса границе је дата у наставку:
граница-радијус : вредностНаставимо претходни пример и подесимо радијус границе да бисмо постигли округле углове.
Пример
у „ .угао ” класе ЦСС датотеке, подесите вредност “ граница-радијус “ својство као “ 30пк ”:
граница-радијус : 30пк ;Уз додавање горње линије, добићете следећи излаз:
Горе наведени излаз означава да су границе успешно промењене у округле углове због својства радијуса границе.
Закључак
У ЦСС-у “ граница-радијус ” својство се користи за промену углова граница. Облик криве се мења према датој вредности полупречника. Користећи поменуто својство, можете подесити радијус угла по свом избору. У овом чланку смо објаснили како заокружити границе углова користећи својство радијуса границе уз помоћ примера.