Účelem této příručky je vysvětlit, jak vytvořit ohraničení kulatých rohů. K tomu musíme nejprve vědět o „ okraj ' vlastnictví. Takže, začněme!
Co je to vlastnost „border“ v CSS?
Chcete-li vytvořit ohraničení kolem prvku, musíte použít „ okraj ' vlastnictví. Pomocí této vlastnosti můžete nastavit „ styl “, “ barva ', a ' šířka “ na hranici.
Syntax
Syntaxe vlastnosti border je dána takto:
okraj : barva stylu šířky
Zde je popis výše uvedených hodnot:
- šířka: Slouží k nastavení šířky ohraničení.
- styl: Používá se k nastavení stylu ohraničení, jako je tečkovaný, čárkovaný, plný nebo dvojitý.
- barva: Určuje barvu okraje.
Zde je příklad, ve kterém implementujeme „ okraj ' vlastnictví.
Jak vytvořit ohraničení pomocí CSS?
Chcete-li vytvořit ohraničení, nejprve přidejte prvek do souboru HTML. Za tímto účelem vytvoříme
a
:
< tělo >
< div třída = 'roh' >
< h1 > Nápověda pro Linux < / h1 >
< p > Zaoblené rohy v CSS < / p >
< / div >
< / tělo >
Dále se přesuneme do sekce CSS.
Zde, „ .roh ” se používá pro přístup ke třídě přiřazené k
.roh {
okraj : 4px pevný rgb ( 248 , 6 , 107 ) ;
šířka : 250 pixelů ;
výška : 150 pixelů ;
barva pozadí : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Jakmile implementujete výše uvedený kód, přejděte do souboru HTML a spusťte jej. Uvidíte následující výsledek:
Nyní se přesuneme do další části, kde vytvoříme čtvercový okraj k okraji kulatého rohu.
Jak zakulatit roh pomocí CSS?
Chcete-li vytvořit kulatý rohový okraj, „ hraniční poloměr ” se používá vlastnost, ve které si můžete nastavit poloměr rohu podle svých preferencí.
Syntax
Syntaxe vlastnosti border-radius je uvedena níže:
hraniční poloměr : hodnotaPokračujme v předchozím příkladu a nastavte poloměr ohraničení tak, aby bylo dosaženo zaoblených rohů.
Příklad
V ' .roh ” třídy souboru CSS, nastavte hodnotu “ hraniční poloměr 'vlastnost jako' 30 pixelů “:
hraniční poloměr : 30 pixelů ;Po přidání výše uvedeného řádku získáte následující výstup:
Výše uvedený výstup znamená, že okraje byly úspěšně změněny na zaoblené rohy díky vlastnosti border-radius.
Závěr
V CSS ' hraniční poloměr ” vlastnost se používá ke změně rohu ohraničení. Tvar křivky se mění podle dané hodnoty poloměru. Pomocí zmíněné vlastnosti si můžete nastavit poloměr rohu dle vlastního výběru. V tomto článku jsme na příkladu vysvětlili, jak zaoblit okraje rohů pomocí vlastnosti border-radius.