Hvordan kan jeg sette en CSS-grense kun på én side?

Hvordan Kan Jeg Sette En Css Grense Kun Pa En Side



Utviklere kan bruke flere CSS-egenskaper for å gjøre nettsidene deres mer attraktive, som ' høyde ' og ' bredde ' egenskaper for innstilling av størrelse, ' tekstjustering ' for å justere tekst, ' border-stil ' og ' grense-radius ” egenskaper for å sette grensen rundt elementet. I tillegg kan du legge til en kantlinje i henhold til dine krav, for eksempel på den ene siden av elementet, bare for å gjøre ting bak objektene mer synlige.

Dette innlegget vil demonstrere:





Metode 1: Sett kant på én side

I CSS kan brukere sette grensen på den ene siden av ønsket element. For dette formålet ' grense-venstre ', ' grense-høyre ', ' border-top ' og ' grense-bunn egenskaper brukes for å legge til kantlinjer på venstre, høyre, topp eller bunn.



I denne delen vil vi spesifikt sette grensen på venstre side av beholderen. For å gjøre det, følg instruksjonene nedenfor.



Trinn 1: Lag en div-beholder



Lag først en div-beholder ved hjelp av '

' stikkord. Sett inn en ' id ”-attributt og tilordne et navn til id-en.

Trinn 2: Sett inn overskrift



Deretter bruker du «< h1> ”-tag for å legge til en overskrift i div-beholderen. Dessuten kan du også bruke andre overskriftskoder i henhold til kravet, for eksempel '< h1> ' til '< h6> '-tagger:

< div id = 'hoved-div' >
< h1 > Grensen på den ene siden h1 >
div >


Det kan sees at beholderen er opprettet:


Trinn 3: Få tilgang til div Container

Nå får du tilgang til HTML div-beholderen og får tilgang til klassenavnet. For å gjøre det, en klassevelger ' # ' brukes med klassenavnet.

Trinn 4: Sett inn kant kun på én side

Etter å ha tilgang til div-beholderen, bruk de nedenfor nevnte CSS-egenskapene:

#main-div{
kant-venstre: 5px solid rød ;
bakgrunn:rgb ( 56 , 239 , 245 ) ;
margin: 20px 100px;
bredde:200px; høyde: 150px
}


Her:

    • ' grense-venstre er en stenografi-egenskap for å angi bredden, stilen og fargen til venstre kantlinje.
    • ' bakgrunn ”-egenskapen brukes til å justere bakgrunnsfargen til elementet.
    • ' margin ” egenskaper setter rommet utenfor grensen.
    • ' bredde ” definerer elementbreddestørrelsen i en beholder.

Det resulterende bildet viser grensen med kun én side:

Metode 2: Sett kant på alle sider med forskjellige stiler

For å sette grensen på alle sider med forskjellige farger, bruk HTML-koden ovenfor. Deretter får du tilgang til div-beholderen ved hjelp av id-navnet og velgeren:

#main-div{
margin: 80px;
kantbredde: 8px 2px 1px 10px;
border-radius: 50px;
border-stil: innfelt solid dobbel prikket;
kantfarge: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}


I koden ovenfor:

    • ' margin ” spesifiserer det tomme rommet utenfor elementet.
    • ' kant-bredde ” angir bredden med forskjellige verdier for hver side. For eksempel har vi lagt til forskjellige verdier i piksler.
    • ' grense-radius ” brukes til å lage den runde kurven av grensen.
    • ' border-stil ”-egenskapen brukes til å angi stilen til kantlinjen. I dette scenariet er fire forskjellige typer stiler angitt for hver side av grensen.
    • ' grensefarge ”-egenskapen brukes for å tildele fargen til kanten. Her er verdien for hver side satt som en annen farge.

Som et resultat vil kantlinjen med forskjellige stiler på hver side brukes:


I denne artikkelen har du lært forskjellige måter å sette CSS-grensen på én og flere sider.

Konklusjon

For å sette grensen kun på én side, lag først en div ved å bruke '

' element. Deretter får du tilgang til div-beholderen og bruker CSS-egenskapene. Etter det, bruk en hvilken som helst eiendom blant disse, inkludert ' grense-venstre ', ' grense-høyre ', ' border-top ' og ' grense-bunn ” for å angi den ene sidekanten. Videre kan brukere også angi ' kant-bredde ', ' border-stil ' og ' grensefarge ” separat på hver side av grensen. Dette innlegget forklarte metoden for å sette CSS-grensen på bare én side.

Annen

Kategori

Populære Innlegg

Beste skannere for PC og hvordan velge en skanner

Installer Kali Linux på VMware

Slik bruker du Nested Switch i MATLAB

Vis systeminformasjon ved å bruke Attu med Milvus

Hvordan få et Nautilus-skall i Minecraft

Finnes det noen metode for å fjerne 'udefinerte' verdier fra Array i JavaScript

Redis XTRIM

Hva er forskjellen mellom Amazon Aurora og RDS

Hvordan opprette en Discord-konto?

Slik slår du av stille modus på iPhone

Installere MLflow: En trinnvis instruksjon om MLflow-installasjon

Uspesifisert feil når du legger til en lenke til Favoritter i Windows Vista og Windows 7 - Winhelponline

Hva er Stack.pop() i Java

LWC For: hvert direktiv

Hvilken HP bærbar PC har Bang & Olufsen

Python Tkinter eksempler

Beste dekal-ID-er Roblox – 2023

Hvordan fungerer path.relative()-metoden i Node.js?

Hva er forskjellen mellom Dockerfile og Docker Compose

Hvordan importere CSV-fil i Kibana