Vývojáři mohou použít více vlastností CSS, aby byly jejich webové stránky atraktivnější, například „ výška ' a ' šířka ” vlastnosti pro nastavení velikosti, “ zarovnání textu “ pro úpravu textu, “ hraniční styl ' a ' hraniční poloměr ” vlastnosti pro nastavení ohraničení kolem prvku. Kromě toho můžete přidat ohraničení podle svých požadavků, například na jednu stranu prvku, jen aby byly věci za objekty viditelnější.
Tento příspěvek ukáže:
Metoda 1: Nastavte ohraničení na jedné straně
V CSS mohou uživatelé nastavit ohraničení na jednu stranu požadovaného prvku. Za tímto účelem je „ ohraničení vlevo “, “ hranice-pravá “, “ okraj-top ' a ' hranice-dole ” vlastnosti se používají pro přidání ohraničení na levé, pravé, horní nebo spodní straně.
V této části konkrétně nastavíme ohraničení na levé straně kontejneru. Chcete-li tak učinit, postupujte podle níže uvedených pokynů.
Krok 1: Vytvořte kontejner div
Nejprve vytvořte kontejner div pomocí „ Krok 2: Vložte nadpis Dále použijte „< h1> ” pro přidání nadpisu do kontejneru div. Kromě toho můžete také použít další značky nadpisů podle požadavku, například „< h1> “ až „< h6> ” tagy: Nyní otevřete kontejner HTML div a získejte přístup k názvu třídy. Chcete-li to provést, použijte výběr třídy „ # ” se používá s názvem třídy. Krok 4: Vložte rámeček pouze na jednu stranu Po přístupu ke kontejneru div použijte níže uvedené vlastnosti CSS: Výsledný obrázek ukazuje okraj pouze s jednou stranou: Chcete-li nastavit ohraničení na všech stranách různými barvami, použijte výše uvedený HTML kód. Poté otevřete kontejner div pomocí názvu ID a selektoru: V důsledku toho bude použito ohraničení s různými styly na každé straně: Chcete-li nastavit ohraničení pouze na jedné straně, nejprve vytvořte div pomocí „
< h1 > Hranice na jedné straně h1 >
div >
Je vidět, že kontejner byl úspěšně vytvořen:
Krok 3: Přístup ke kontejneru div
border-left: 5px plné Červené ;
pozadí:rgb ( 56 , 239 , 245 ) ;
okraj: 20px 100px;
šířka:200px; výška: 150px
}
Tady:
Metoda 2: Nastavte ohraničení na všech stranách s různými styly
okraj: 80px;
border-width: 8px 2px 1px 10px;
border-radius: 50px;
bordurový styl: vložka plná dvojitě tečkovaná;
barva ohraničení: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
Ve výše uvedeném kódu:
V tomto článku jste se naučili různé způsoby, jak nastavit ohraničení CSS na jednu a více stran. Závěr