CSS skisserer radius

Det meste av tiden har vi en tendens til å blande konturegenskapen til HTML med grenseeiendommen. Mens begge egenskapene er ganske forskjellige fra hverandre. Grenseeiendommen kan ta ekstra plass. Oversikt til noe element kan ikke ta plass og kan overlappe med andre elementer også. Vi kan ikke sette sidene av en disposisjon for et spesifikt element. Vi kan imidlertid sette alle de 4 sidene av en grense separat. Du kan heller ikke endre elementets størrelse eller posisjon ved hjelp av en disposisjon rundt den. Omrisset er alltid på utsiden av elementet, og grensen brukes til å være den indre siden av elementet. Vi vil representere bruken av disposisjon i HTML -koder sammen med å sjekke ut radius.

Eksempel # 01:

La oss komme i gang med bruk av grenser i vårt eksempel. Etter det vil vi ta en form for omrissegenskapen. Ved å bruke den grunnleggende syntaks for å lage en HTML -fil, har vi brukt HTML, hode, stil og kroppskoder i dette programmet til Visual Studio Code. Innenfor kroppskoden har vi brukt to overskrifter med bruk av H1- og H2 -størrelseskodene. H1 er den største overskriften som er tilgjengelig, og den kan forkortes til H6- som er den minste størrelsen tilgjengelig. H1 inneholder et enkelt 2-ord "grenseeksempel". Mens H2 inneholder en lang setning. Innenfor stilmerket til "hodet" -merket har vi stylet "H2" -overskriften ved å legge til en blåfarge kant på 3 piksler på den. La oss lagre denne koden og kjøre den i Google Chrome -nettleseren.

Etter å ha kjørt denne HTML -koden til Visual Studio Code i en hvilken som helst nettleser, har vi resultater vist nedenfor. Den første overskriften er tatt som en enkel overskrift uten styling. Mens den andre overskriften har blitt vist med den blå farge solide grensen på 3 piksler rundt den.

La oss legge til en grense og skissere begge samtidig på overskriften for å se forskjellen. Vi har brukt stylingen for H2 -overskriften som vist. Vi har lagt til en ekstra linje i stylingen av H1 for omrissoppretting. Denne disposisjonen vil være i grønn farge og stiplet format. Hver av prikkene vil være på 5 piksler som spesifisert. Grensen er allerede definert som 2 piksler solid blå. La oss lagre og feilsøke denne HTML -koden til Visual Studio og kjøre den i nettleseren.

Utgangen fra ovennevnte HTML-kode har vist den viste below-siden. Den blå fargen rundt overskriften “H2” viser den solide grensen mens den grønne stiplede linjen med størrelse 5 piksler har illustrert omrisset av overskrift 2. Nå kan du se forskjellen.

Eksempel # 02:

Omrisset kan også være solid, akkurat som grensen. La oss ta en skikkelse på et eksempel til å lage en ny solid disposisjon. Så vi har brukt den samme filen med en liten forskjell fra koden ovenfor. I denne HTML -filen har vi brukt den samme H1 -overskriften til størrelse 1 og en "Div" -kode har blitt brukt til å lage en ny seksjon på samme HTML -side. Du kan legge til mer enn 1 element i "Div" -delen. Akkurat nå har vi lagt til den enkle tekstlinjen i den for å skissere "div" -merket ". Innenfor stilmerket til denne HTML -filen har vi brukt “Div” -tittelen for å style den. Vi bruker omrissegenskapen for å skissere 3 piksler. Denne disposisjonen vil være solid uten streker eller prikker. Fargen vil være 'gulgrønn' som spesifisert i stilområdet. "3px" -verdien har blitt brukt til å spesifisere lengden på en omriss- hvor tykk eller tynn. La oss lagre denne koden og kjøre den i nettleseren for å se resultatene.

Den gulgrønne fargeoversikten på størrelse 3 piksler er blitt generert rundt utsiden av elementet “Div”. Det ser veldig ut som grensene, selv om retningen alltid er utad.

Innenfor alle de ovennevnte eksemplene har vi dekket opprettelsen av en solid kant, solid disposisjon og prikket disposisjon i HTML -filen. Nå skal vi lage en stiplet oversikt rundt HTML -elementet. Vi har prøvd å bruke det samme HTML -skriptet så langt i Visual Studio -koden. En enkelt endring vi har gjort i stilkoden er bruken av det "stiplede" nøkkelordet i stedet for "solid" for å designe omrisset på 3 piksler. Vi har også endret fargen for disposisjonen til "Blue-Violet". La oss bare lagre dette HTML -oppdaterte skriptet og utføre det.

Etter vellykket feilsøking av denne HTML -koden i Visual Studio -koden, er den blitt utført i Chrome -nettleseren, og vi har den viste utdataene nedenfor. Den blåkviolette stiplede disposisjonen er generert rundt "Div" -delen av denne HTML-statiske siden.

Eksempel # 03:

La oss ta en titt på radien til en disposisjon i HTML -skriptet. Som vi allerede har diskutert i innledende avsnitt, kan vi ikke spesifisere verdiene for hver side av omrisset separat som vi kan gjøre for grensene. Så innenfor den samme HTML -filen har vi oppdatert kropps- og stilkoden etter behov. Vi har brukt totalt 1 overskriftskode “H1”, 4 “Div” -merker og 3 “P” avsnitts tagger.

Overskriften vil være av største størrelse (“Outline eksempel”) mens alle de 4 “Div” -merkerne inneholder 4 spesifiserte klasser “A”, “B”, “C” og “D” for å lage 4 seksjoner i Samme HTML -side. Avsnittene har blitt stående tom bare for stylingens skyld. Dette er for "kropp" -merket. Ved å bruke de spesifikke klassene til hver "div" -kode, har vi spesifisert "disposisjon" -egenskapen i den. Det vil lage en stiplet blå-violett disposisjon for 1. og 3. “div” -delen og en “prikket” blå-violett oversikt for 2. og fjerde “div” -kode. Alle disse konturene vil ha samme bredde, "4px". Vi har brukt "-Moz-Outline-Radius" -egenskapen til konturer for å angi verdier for hver side av omrisset separat. Vi har satt radius på venstre side for div 1, venstre/høyre side for div 2, venstre/høyre/toppsiden for div 3 og alle 4 sider for div 4. Bredde, margin og polstring for alle 4 “div” -seksjonene har vært de samme. La oss teste resultatet for denne koden nå.

Etter utførelsen av denne HTML-koden, fikk vi samme størrelse 4-pikseloverriss for alle seksjoner. Bruken av RADIUS -egenskapen påvirker ikke utgangen mens bredden er oppdatert ved hjelp av "bredden" på "Div" -delen.

Konklusjon:

Det innledende avsnittet har blitt brukt for å demonstrere den klare forskjellen mellom grenseegenskapen og disposisjonsegenskapen til CSS -styling i HTML. Innenfor eksemplene vi har brukt i denne artikkelimplementeringen, har vi diskutert å lage forskjellige typer konturer sammenlignet med grensene sammen med forskjellene deres. Vi har også diskutert eksemplet for å vise at radien til en disposisjon ikke kan endres, og det avhenger helt av elementets grense for å gjøre den fremhevet og det kan også overlappe hverandre.