CSS -sirkel med kant

Former brukes ofte i webdesign. Mer spesifikt brukes sirkelformen til å trekke brukerens oppmerksomhet og for å få noe til å skille seg ut, for eksempel profilbilder er stort sett innebygd i en sirkelramme. CSS tilbyr flere stylingegenskaper for elementene for å få dem til å se bedre ut for applikasjonen som "Border-Radius”Eiendom brukes til å gjøre elementets kanter rundt og“grense”Eiendom setter elementets grense.

Denne oppskrivningen vil instruere deg:

• Hvordan lage en sirkel med grense i CSS?
• Hvordan legge til farge i den grensede sirkelen ved hjelp av CSS?
• Hvordan justere grensestilen til en sirkel med CSS?

Hvordan lage en sirkel med grense i CSS?

For å skape en sirkel med en kant i CSS, brukes først grenseegenskapen til å bruke grensen rundt elementet. “Border-Radius”Eiendom brukes til å lage grensenes sirkulær form.

For dette formålet, gå gjennom det oppgitte eksemplet.

Opprett en HTML -fil

Først, legg til en "”Element og tilordne det en klasse”Circle-Div”:

Stil “Circle-Div” -klasse

Få tilgang til “”Container ved hjelp av den spesifiserte klassen”.Circle-Div”Og bruk følgende egenskaper:

.sirkel-div
Bredde: 200px;
Høyde: 200px;
Border-Radius: 50%;
Grense: 5px Solid RGB (119, 0, 255);

Her:

• “bredde”Angir sirkelsbredden.
• “høyde”Bestemmer sirkelens høyde.
• “Border-Radius”Med verdien”50%”Begynner sirkelgrensen.
• “grense”Brukes til å bruke en grense med den spesifiserte grensebredden, stilen og fargen.

Produksjon

Hvordan legge til farge i den grensede sirkelen ved hjelp av CSS?

CSS “bakgrunnsfarge”Eiendom brukes til å legge farge til sirkelen som følger:

Bakgrunnsfarge: Lightseagreen;

Produksjon

Hvordan justere grensestilen til en sirkel med CSS?

Ved å spesifisere grensestilen, kan vi style sirkelens grense. Noen ofte brukte grensestiler er listet opp nedenfor:

• Prikket
• Fast
• Spor
• Innsatt
• Utgangspunktet
• Dobbelt

Stiplet grense

Sett grensestilen til “prikket”For å spesifisere den stiplede grensen:

Grense: 5px prikket RGB (252, 87, 170);

Produksjon

Groove Border

Bruk grensestilen “spor”I grenseeiendommen:

Grense: 10px Groove RGB (187, 181, 226);

Produksjon

Vi har vellykket demonstrert hvordan vi kan lage og style den grensede sirkelen i CSS.

Konklusjon

For å lage en sirkel med grenser, brukes to hoved CSS -egenskaper. For å lage en grense, først, legg til en "div" -beholder og få tilgang til den i CSS ved hjelp av sin respektive klasse. Deretter bruker du CSS “Border-Radius”Eiendom og justere den til“50%”For å lage en sirkel, og CSS“grense”Eiendom brukes til å sette en grense rundt sirkelen. Denne bloggen har forklart metoden for å lage en sirkel med grenser i CSS.