Ang layunin ng manwal na ito ay ipaliwanag kung paano lumikha ng mga hangganan ng bilog na sulok. Para dito, una, dapat nating malaman ang tungkol sa ' hangganan ” ari-arian. Kaya, magsimula tayo!
Ano ang 'border' Property sa CSS?
Upang lumikha ng isang hangganan sa paligid ng isang elemento, kailangan mong gamitin ang ' hangganan ” ari-arian. Sa paggamit ng property na ito, maaari mong itakda ang ' istilo ”, “ kulay ”, at “ lapad ” ng hangganan.
Syntax
Ang syntax ng border property ay ibinibigay bilang:
hangganan : kulay ng estilo ng lapad
Narito ang paglalarawan ng mga halagang ibinigay sa itaas:
- lapad: Ito ay ginagamit upang itakda ang lapad ng hangganan.
- istilo: Ginagamit ito upang itakda ang istilo ng hangganan, gaya ng tuldok, putol-putol, solid, o doble.
- kulay: Tinutukoy nito ang kulay ng hangganan.
Narito ang isang halimbawa kung saan ipinatupad namin ang ' hangganan ” ari-arian.
Paano Gumawa ng Border Gamit ang CSS?
Upang lumikha ng isang hangganan, una, magdagdag ng isang elemento sa isang HTML file. Para magawa ito, gagawa kami ng
at
:
< katawan >
< div klase = 'sulok' >
< h1 > Hint ng Linux < / h1 >
< p > Mga bilog na sulok sa CSS < / p >
< / div >
< / katawan >
Susunod, lilipat tayo sa seksyong CSS.
Dito, ang ' .sulok ” ay ginagamit upang ma-access ang klase na nakatalaga sa
.sulok {
hangganan : 4px solid rgb ( 248 , 6 , 107 ) ;
lapad : 250px ;
taas : 150px ;
kulay ng background : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Kapag naipatupad mo na ang nabanggit na code, pumunta sa HTML file at i-execute ito. Makikita mo ang sumusunod na resulta:
Ngayon, lilipat tayo sa susunod na bahagi, kung saan lilikha tayo ng square border sa round corner border.
Paano Mag-round Corner Gamit ang CSS?
Upang lumikha ng isang bilog na sulok na hangganan, ang ' hangganan-radius ” Ang ari-arian ay ginagamit, kung saan maaari mong itakda ang radius ng sulok ayon sa iyong mga kagustuhan.
Syntax
Ang syntax ng border-radius property ay ibinibigay sa ibaba:
hangganan-radius : halagaIpagpatuloy natin ang nakaraang halimbawa at itakda ang border-radius para makamit ang mga round corner.
Halimbawa
Sa ' .sulok ” class ng CSS file, itakda ang halaga ng “ hangganan-radius ” ari-arian bilang “ 30px ”:
hangganan-radius : 30px ;Sa idinagdag na linya sa itaas, makukuha mo ang sumusunod na output:
Ang ibinigay na output sa itaas ay nagpapahiwatig na ang mga hangganan ay matagumpay na nabago sa mga bilog na sulok dahil sa pag-aari ng border-radius.
Konklusyon
Sa CSS ' hangganan-radius ” Ang ari-arian ay ginagamit upang baguhin ang sulok ng mga hangganan. Ang hugis ng curve ay nagbabago ayon sa ibinigay na halaga ng radius. Gamit ang nabanggit na ari-arian, maaari mong itakda ang radius ng sulok ayon sa iyong pinili. Sa artikulong ito, ipinaliwanag namin kung paano iikot ang mga hangganan sa sulok gamit ang pag-aari ng border-radius sa tulong ng isang halimbawa.