Vývojári môžu použiť viacero vlastností CSS, aby boli ich webové stránky atraktívnejšie, ako napríklad „ výška “ a „ šírka “ vlastnosti pre nastavenie veľkosti, “ zarovnanie textu “ na úpravu textu, “ border-style “ a „ hraničný polomer ” vlastnosti na nastavenie okraja okolo prvku. Okrem toho môžete pridať orámovanie podľa svojich požiadaviek, napríklad na jednu stranu prvku, len aby boli veci za objektmi viditeľnejšie.
Tento príspevok bude demonštrovať:
Metóda 1: Nastavte okraj na jednej strane
V CSS môžu používatelia nastaviť okraj na jednej strane požadovaného prvku. Na tento účel sa „ hranica-vľavo “, “ hranica-pravá “, “ border-top “ a „ okraj-dole Vlastnosti sa používajú na pridávanie okrajov na ľavej, pravej, hornej alebo spodnej strane.
V tejto časti konkrétne nastavíme okraj na ľavej strane kontajnera. Postupujte podľa nižšie uvedených pokynov.
Krok 1: Vytvorte kontajner div
Najprv vytvorte kontajner div pomocou „ Krok 2: Vložte nadpis Ďalej použite „< h1> ” na pridanie nadpisu do kontajnera div. Okrem toho môžete použiť aj iné značky nadpisov podľa požiadavky, ako napríklad „< h1> “ až „< h6> 'značky: Teraz prejdite do kontajnera div HTML a získajte prístup k názvu triedy. Ak to chcete urobiť, výber triedy „ # ” sa používa s názvom triedy. Krok 4: Vložte orámovanie len na jednu stranu Po prístupe ku kontajneru div použite nižšie uvedené vlastnosti CSS: Výsledný obrázok zobrazuje okraj iba s jednou stranou: Ak chcete nastaviť orámovanie na všetkých stranách rôznymi farbami, použite vyššie uvedený kód HTML. Potom prejdite do kontajnera div pomocou názvu ID a selektora: V dôsledku toho sa použije orámovanie s rôznymi štýlmi na každej strane: Ak chcete nastaviť orámovanie len na jednej strane, najprv vytvorte div pomocou „
< h1 > Hranica na jednej strane h1 >
div >
Je vidieť, že kontajner bol úspešne vytvorený:
Krok 3: Prístup ku kontajneru div
border-left: 5px plné červená ;
pozadie:rgb ( 56 , 239 , 245 ) ;
okraj: 20px 100px;
šírka: 200px; výška: 150px
}
Tu:
Metóda 2: Nastavte orámovanie na všetkých stranách s rôznymi štýlmi
okraj: 80px;
border-width: 8px 2px 1px 10px;
border-radius: 50px;
bordúra: vložená plná dvojitá bodkovaná;
farba okraja: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
Vo vyššie uvedenom kóde:
V tomto článku ste sa naučili rôzne spôsoby nastavenia okraja CSS na jednej alebo viacerých stranách. Záver