Účelom tejto príručky je vysvetliť, ako vytvoriť okrúhle okraje rohov. Najprv musíme vedieť o „ hranica ' nehnuteľnosť. Takže, začnime!
Čo je to „hraničná“ vlastnosť v CSS?
Ak chcete vytvoriť okraj okolo prvku, musíte použiť „ hranica ' nehnuteľnosť. Pomocou tejto vlastnosti môžete nastaviť „ štýl “, “ farba “ a „ šírka “ hranice.
Syntax
Syntax vlastnosti border je daná takto:
hranica : farba štýlu šírky
Tu je popis vyššie uvedených hodnôt:
- šírka: Používa sa na nastavenie šírky okraja.
- štýl: Používa sa na nastavenie štýlu ohraničenia, ako je bodkovaný, prerušovaný, plný alebo dvojitý.
- farba: Určuje farbu okraja.
Tu je príklad, v ktorom implementujeme „ hranica ' nehnuteľnosť.
Ako vytvoriť okraj pomocou CSS?
Ak chcete vytvoriť orámovanie, najskôr pridajte prvok do súboru HTML. Aby sme tak urobili, vytvoríme
a
:
< telo >
< div trieda = 'roh' >
< h1 > Tip pre Linux < / h1 >
< p > Zaoblené rohy v CSS < / p >
< / div >
< / telo >
Ďalej sa presunieme do sekcie CSS.
Tu je „ .roh ” sa používa na prístup k triede priradenej k prvku
.roh {
hranica : 4px pevný rgb ( 248 , 6 , 107 ) ;
šírka : 250 pixelov ;
výška : 150 pixelov ;
farba pozadia : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Po implementácii vyššie uvedeného kódu prejdite do súboru HTML a spustite ho. Uvidíte nasledujúci výsledok:
Teraz prejdeme do ďalšej časti, kde vytvoríme štvorcový okraj k okraju okrúhleho rohu.
Ako zaobliť roh pomocou CSS?
Ak chcete vytvoriť okraj s okrúhlym rohom, „ hraničný polomer ” sa používa vlastnosť, v ktorej si môžete nastaviť polomer rohu podľa vašich preferencií.
Syntax
Syntax vlastnosti border-radius je uvedená nižšie:
hraničný polomer : hodnotuPokračujme v predchádzajúcom príklade a nastavte polomer okraja, aby ste dosiahli zaoblené rohy.
Príklad
v ' .roh ” triedy súboru CSS, nastavte hodnotu “ hraničný polomer “vlastnosť ako “ 30 pixelov “:
hraničný polomer : 30 pixelov ;Po pridaní vyššie uvedeného riadku získate nasledujúci výstup:
Vyššie uvedený výstup znamená, že okraje sa úspešne zmenili na oblé rohy kvôli vlastnosti border-radius.
Záver
V CSS “ hraničný polomer ” vlastnosť sa používa na zmenu rohu okrajov. Tvar krivky sa mení podľa danej hodnoty polomeru. Pomocou spomínanej vlastnosti si môžete nastaviť polomer rohu podľa vlastného výberu. V tomto článku sme na príklade vysvetlili, ako zaobliť okraje rohov pomocou vlastnosti border-radius.