CSS runde kanter
Eksempel # 01:
La oss runde kantene på bilder eller noen avsnitt. Vi har startet HTML -koden med bruk av HTML Basic -taggen etterfulgt av Head -taggen. Hodemerket inneholder tittelkoden som har blitt brukt til å gi en tittel på websiden som “CSS avrundede kanter eller hjørner”. Innenfor kroppskoden til HTML -dokumentet har vi brukt en overskrift av størrelse 1 som ikke vil bli brukt til å runde hjørnene. Tre avsnitt har blitt brukt ved bruk av avsnitts -taggen “P”.
De to første avsnittene er spesifisert med 2 forskjellige klasser: A og B. Tredje ledd er spesifisert med ID “C”. Alle disse tre avsnittene inneholder setninger som kan brukes som innholdet i avsnittet. Disse avsnittene kan vises med avrundede kanter på HTML -siden. La oss se på CSS på denne siden. Innenfor stilkoden til dette HTML -skriptet har vi spesifisert klassene A og B for de to første avsnittene for å style hver for seg begge.
Vi har brukt grensradiusegenskapen for første klasse “A” for å legge til radius på 25 piksler og bakgrunnen ville være farget, himmelblå. Grensradiusegenskapen har også blitt brukt til andre klasse for å legge til grensradius på 45 piksler med to piksler solid kant rundt seg. For begge de første klassene har vi brukt 20-piksler polstring 200-piksler bredde og 50 piksler høyde. På den annen side har tredje avsnitts -ID blitt brukt til å legge til radius på 90 piksler rundt den.
Ved å bruke bakgrunnsegenskapen er et bilde lagt til som bakgrunnen. Sammen med det har bakgrunnsposisjonsegenskapen blitt brukt til å plassere bakgrunnen for et bilde, og bakgrunnsrepetisjonen er satt til å gjenta. På grunn av bruken av denne egenskapen, kan bakgrunnsbildet gjentas så mange ganger som mulig. Polstring, høyde og bredde ville bli sitert den samme, som vi brukte i de to ovennevnte stylings for avsnitt. Koden er nå fullført, og vi kan kjøre den på Visual Studio -koden via "Kjør" -menyen til oppgavelinjen etterfulgt av alternativet "Start feilsøking".
Utgangen fra denne HTML -koden er vist på Chrome -nettleseren som nedenfor. De to første avsnittene er stylet innenfor grenseradiusen på henholdsvis 25 piksler og 45 piksler. Begge avsnittene inneholder forskjellige bakgrunner med ganske samme polstring, bredde og høyde. Du kan se at kantene på begge avsnittets radius er avrundet.
Det tredje avsnittet har også blitt vist innenfor sirkelradiusen på 90 piksler, mens bildet som ble brukt som bakgrunn har blitt gjentatt mange ganger.
Eksempel 2:
Vi må initialisere dette eksemplet med den viktigste HTML -taggen og hodemerket. Tittelen er brukt til å gi tittelen til denne HTML -siden som “CSS avrundede kanter eller hjørner”. Mens vi tok en titt på kroppskoden til dette HTML -skriptet, fant vi en enkelt overskrift av størrelse 1 med en enkel teksttittel i det. Denne HTML -siden inneholder totalt 5 avsnitt med bruk av avsnitts tagger eller elementer. Det første avsnittet viser at dette vil inneholde en grenseradius på 50 piksler og formørkelsesformen vil bli dannet.
Andre avsnitt bruker ingenting annet enn en ID “Eclipse”. Alle de tre andre avsnittene inneholder sine egne spesifiserte klasser: fire, tre og to, sammen med noen setninger som viser grense-radiusverdiene som brukes til å opprette forskjellige formørkelser for bestemte avsnitt. Disse avsnittene vil vise det totale antallet hjørner som blir avrundet. ID "Eclipse" for første ledd har blitt brukt til å style første avsnitt i en formørkelse. Vi har spesifisert grensradius på 50%, bakgrunn av gul grønn farge, polstring på 10 piksler, bredden på 110 piksler og høyde på 50 piksler for første avsnitt. Deretter har vi brukt klassen i tredje avsnitt, "fire", for å runde de fire hjørnene av avsnittet. For dette har vi brukt grensradiusegenskapen for topp-, bunn-, venstre- og høyre kanter av avsnittet. Vi har spesifisert bakgrunnen som Burlywood, med polstring på 15 piksler, en bredde på 200 piksler og en høyde på 40 piksler.
Dette betyr at alle de fire hjørnene eller kantene på tredje avsnitt vil bli avrundet. For at det fjerde avsnittet ble stylet av klassen “tre”, ville tre av hjørnene eller kantene bli avrundet mens den ville bli uendret uendret. Bakgrunnen er spesifisert som gull mens polstring, bredde og høyde vil være den samme som vi har brukt til tredje ledd. Vi har brukt klassen “to” for femte avsnitt for å runde de to hjørnene. Den samme polstringen, bredden og høyden vil bli brukt mens fargen ville være annerledes for dette avsnittet. Første ledd vil ikke vise noen avrundede kanter fordi det ikke inneholder noe styling for det. La oss lagre dette HTML -skriptet og utføre det med Visual Studio Code via alternativet Start feilsøking.
Utgangen fra dette HTML -programmet har vist at første ledd ikke inneholder avrundede kanter fordi vi har gått glipp av stylingen av dette avsnittet. På den annen side er alle de fire avsnittene blitt stylet, og vi har fått avrundede kanter for alle disse.
Konklusjon
Dette handler om bruken av grensradiusegenskapen for å runde kantene på et hvilket som helst HTML -element i HTML -skriptet. For dette formålet har vi brukt HTML -eksemplene på en veldig enkel og utsøkt måte. Med det første eksemplet har vi demonstrert bruken av grensradiusegenskapen for å runde alle kantene på ett element eller bilde på en gang uten å spesifisere kantene. På den annen side innenfor det andre eksemplet har vi spesifisert bruk av forskjellige hjørner eller kanter for å runde disse kantene eller hjørnene deretter ved bruk av forskjellige verdier.