CSS -grensen opacitet
Grense opacitet
Grenser brukes til å omslutte mange ting som tekst, bilder eller annen form for data, som vi vet at hvert aspekt eller element i hypertekstmarkeringsspråk kan styles ved å bruke CSS. Så vi vil bruke CSS for å style en grense ved å gjøre den ugjennomsiktig og semitransparent. CSS kan gjøres på forskjellige måter som stilkode CSS eller inline CSS, som kan ha noen forskjellige typer effekter på grensen. Det grunnleggende skriptet for å lage en grense ugjennomsiktig og kontrollere dens åpenhet til en viss grad i CSS er skrevet nedenfor:
"Grense: 1px fast RGBA (0, 0, 0);"I skriptet ovenfor kan vi se at enheten kalles med navnet, størrelsen er definert i piksler, og fargen er definert i “RGBA” -format, som vil se over fargekodingen og gjennomsiktigheten til grensen.
Nå vil vi implementere dette konseptet ved å skrive manuset i Notisblokk ++ og kjøre det i en nettleser.
Eksempel 01: Bruke CSS i en hodemerke i en HTML -fil
I dette eksemplet lager vi en HTML -fil med en "div" med grenser, og "div" vil inneholde litt informasjon om stilkoden mellom HTML -filens hodemerke.
I skriptet ovenfor kan vi se at hodemerket til HTML -filen har to tagger i seg. I den første taggen er tittelen på filen skrevet, og den andre taggen, som er stilmerket, har de visuelle egenskapene til hvordan en "div" vil se ut når filen blir utført i en nettleser. I denne delen av koden er padding -egenskapen definert i piksler, deretter er egenskapene til grensen til Div definert ved å gi den størrelse og fargeformatet i standard RGBA -metoden der den siste parameteren er for opacitet, og vi har gitt det en viss verdi. Så lukker vi stilkoden sammen med hodemerket. Etter dette vil vi åpne Body -taggen og gi kroppen en overskrift og deretter en div som har litt styling gjort for det gjennom overskriften CSS, som vil være aktuelt på hver div i HTML -filen.
Etter dette lagrer vi denne filen i ".HTML ”-format og åpne denne filen i nettleseren vår for å visualisere filen.
I ovennevnte utdrag kan vi se at overskriften som ble levert i Body -taggen er til stede sammen med en DIV -beholder der det er skrevet noe tekst. Denne DIV -containeren har også en rød semitransparent kant, noe som betyr at grensen har en viss opacitet definert i stilkoden til overskriften til HTML -filen.
Eksempel 02: Bruke CSS for å gjøre grensens topp ugjennomsiktig i en HTML -fil
I dette eksemplet vil vi opprette en HTML -fil med en "div" som har grenser, og "div" vil ha noen detaljer om stilkoden mellom HTML -filens hodemerke, men i dette tilfellet vil vi legge til en annen tag Det vil bare være ugjennomsiktig den øverste delen av grensen.
Ovennevnte skript viser at HTML -filens hodemerke har to tagger. Tittelen på filen er skrevet i den første taggen, og stilkoden har de visuelle attributtene for hvordan en "div" vil se ut når filen utføres på en nettleser. Polstringsverdien leveres i piksler i denne delen av koden, og egenskapene for divens grense er etablert ved å gi den en størrelse og fargeformat i standard RGBA -metoden, med den siste parameteren som opacitet, som vi har satt til " 0.”
Etter det åpnet vi en grensetapp i RGBA-formatet, og denne gangen vil vi sette det ugjennomsiktige alternativet til en verdi som vil gjøre bare den øverste semitransparent. Stilmerket og hodemerket vil deretter være lukket. Etter det vil vi åpne Body -taggen og gi den en overskrift, etterfulgt av en div med litt styling brukt via overskriften CSS, som vil bli brukt på hver DIV i HTML -filen.
Etter det vil vi lagre manuset i “.HTML ”-format og åpne det i nettleseren vår for å se den.
Vi kan se i ovennevnte utdrag at overskriften fra Body -taggen er der, samt en DIV -beholder med noe innhold. Grensen har også en rød semitransparent topp, noe som indikerer at grensens øverste del har en viss opacitet, som ble bestemt av stilkoden til HTML -filens overskrift.
Eksempel 03: Bruke CSS for å gjøre grensens nederste del ugjennomsiktig og skille fargen fra sidene og toppen i en HTML -fil
I dette eksemplet vil vi konstruere en HTML -fil med en "div" som har grenser, og "div" vil ha litt informasjon om stilkoden mellom HTML -filens hodemerke, men i dette tilfellet vil vi legge til to flere Tagger som bare vil ugjennomsiktig den nederste delen av grensen.
Følgende skript viser at HTML -filens hodeelement har to tagger. Den første taggen inneholder filens tittel, og stilkoden inneholder de visuelle elementene i hvordan en "div" vil vises når filen blir utført i en nettleser. Polstringsverdien leveres i piksler i denne delen av koden, og egenskapene for divens grense er etablert ved å gi den en størrelse og fargeformat i standard RGBA -metoden, med den siste parameteren som opacitet, som vi har satt til " 0.”
Etter det åpnet vi en RGBA Border-Bottom-tag og endret fargeparametrene til en ny farge. Vi åpnet deretter grensen-bottom-taggen igjen og endret opacitetsparameteren til “0.2 ”for å lage den nederste delen av grensen Semitransparent. Etter det vil stil- og hodemerkene være lukket. Etter det vil vi åpne kroppselementet og legge til en overskrift, etterfulgt av en div med noe styling brukt via overskriften CSS, som vil bli brukt på alle DIV -er i HTML -filen.
Manuset blir deretter lagret i ".HTML ”-format og åpnet i nettleseren vår for å bli sett.
Ovennevnte utdrag viser overskriften fra kroppskoden, samt en div -beholder med litt tekst. Grensen har også en grå Semitransparent bunn, noe som antyder at den nederste delen av grensen har en vis.
Konklusjon
I denne artikkelen diskuterte vi flere metoder for å legge opacitet til en grense i CSS. Som vi diskuterte, tillater CSS oss å style og redigere hvert element i en HTML -side, som inkluderer en DIV -beholder med en grense. Vi implementerte dette fenomenet på en HTML -side og gjorde flere endringer i stylingen ved å gjøre endringer i CSS -stilkoden i Notisblokkene ++ miljøet.