Veidojot vietni, pusloku pievienošana loku vietā nodrošina labāku izskatu. Turklāt pusloku veidošana ir vienkārša un interesanta.
Šajā rakstā mēs sniegsim ceļvedi, kā izveidot pusloku, izmantojot CSS.
Kā izveidot pusloku ar CSS?
Lai izveidotu pusloku, mēs izmantosim ' robeža-rādiuss ” īpašums. Šis īpašums palīdzēs mums izveidot pusloku šādos veidos:
- Pusaplis no augšas
- Pusaplis no apakšas
- Pusaplis no kreisās puses
- Pusaplis no labās puses
Apspriedīsim katru atsevišķi!
1. piemērs: izveidojiet pusloku no augšas, izmantojot CSS
Lai izveidotu pusloku no augšas, vispirms mēs norādīsim “ HTML Tagad iestatiet piemērotos div izmērus, piemēram, mēs piešķirsim “ platums 'īpašuma vērtība kā ' 180 pikseļi ' un ' augstums 'īpašums ar vērtību' 90 pikseļi ”. Nākamajā darbībā iestatiet “ robeža-rādiuss 'īpašuma vērtība' 12rem 12rem 0 0 ”; kur pirmais cipars 12rem apgriezīs div augšējo kreiso pusi, otrais 12rem apgriezīs augšējo labo pusi, trešais un ceturtais cipars 0 izgriezīs div apakšējo daļu. Visbeidzot, lai piešķirtu aplim krāsu, izmantojiet ' fona krāsa 'īpašums ar vērtību' violets ”. CSS Saglabājiet HTML failu ar minēto kodu un atveriet to savā pārlūkprogrammā: Kā redzat, mēs esam veiksmīgi izveidojuši pusloku ar CSS border-radius rekvizītu. Lai izveidotu pusloku no apakšas, mēs iestatīsim robežas rādiusa rekvizītu vērtības kā ' 0 0 12rem 12rem ”, kur pirmās divas vērtības apzīmē augšējās kreisās un augšējās labās puses apmales rādiusu. Mēs esam iestatījuši tos uz 0, lai div augšējā daļa pilnībā izzustu. Apakšējā daļā esam tikai nedaudz apgriezuši apakšējo kreiso un apakšējo labo pusi, iestatot vērtības uz 12rem. CSS Izvade Lai izveidotu CSS pusloku pa labi, vispirms noregulējiet konteinera augstumu un platumu, lai iegūtu pareizu apļa formu. Iestatiet ' platums 'kā' 90 pikseļi ' un ' augstums 'kā' 180 pikseļi ' šoreiz. Atkal izmantojiet robežrādiusa rekvizītu ar vērtību ' 0 12 rem 12 rem 0 ”, kur pirmā vērtība 0 ir augšējā kreisajā pusē, pēdējā vērtība 0 ir apakšējā kreisajā pusē, un otrā un trešā vērtība tiek pievienota, lai apgrieztu augšējo labo un apakšējo labo pusi. Lietojot šīs vērtības, no labās puses tiks izveidots pusloks. CSS Izvade Šoreiz norādiet robežas rādiusa rekvizītu kopā ar vērtību ' 12rem 0 0 12rem ”; pirmā un pēdējā vērtība 12rem apgriezīs div augšējo kreiso un apakšējo kreiso pusi, iestatot otro un trešo vērtību uz 0, tiks skaidri parādīta apļa augšējā labā un apakšējā labā puse. Galu galā tiks izveidots mūsu kreisās puses pusaplis. CSS Izvade Mēs esam piedāvājuši dažādas metodes pusloka izveidošanai ar CSS. Lai izveidotu pusloku, mēs varam vienkārši izmantot CSS ' robeža-rādiuss ” īpašums. Pusloku var izveidot no vienas puses uz otru, piemēram, pa kreisi, pa labi, uz augšu un uz leju. Īpašumā border-radius sākotnējā vērtība ir augšējā kreisajā pusē, otrā ir augšējā labajā pusē, trešā ir apakšējā labajā pusē un ceturtā vērtība ir apakšējā kreisajā pusē. Šajā rakstā ir paskaidrots, kā ar CSS izveidot pusloku.
platums : 180 pikseļi ;
augstums : 90 pikseļi ;
robeža-rādiuss : 12 rem 12 rem 0 0 ;
fona krāsa : violets ;
}
2. piemērs: izveidojiet pusloku no apakšas, izmantojot CSS
platums : 180 pikseļi ;
augstums : 90 pikseļi ;
robeža-rādiuss : 0 0 12 rem 12 rem ;
fona krāsa : violets ;
}
3. piemērs: izveidojiet pusloku no labās puses, izmantojot CSS
platums : 90 pikseļi ;
augstums : 180 pikseļi ;
robeža-rādiuss : 0 12 rem 12 rem 0 ;
fona krāsa : violets ;
}
4. piemērs: izveidojiet pusloku no kreisās puses, izmantojot CSS
platums : 90 pikseļi ;
augstums : 180 pikseļi ;
robeža-rādiuss : 12 rem 0 0 12 rem ;
fona krāsa : violets ;
}
Secinājums