Border-radius: Avrundede hjørner i CSS. Grunnleggende om bruk av css border

CSS3 ramme utfyller muligheten til å formatere elementkanter med egenskaper som tillater det rundt hjørnene element, og også bruk Bilderå designe kantene til elementet.

Avrundede hjørner og bilderammer

1. Avrunding av hjørner med kantradius

Nettleserstøtte

DVS: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android-nettleser: 4.1
Chrome for Android: 44

Eiendommen lar deg runde hjørnene av små bokstaver og blokkelementer. Kurven for hver vinkel er definert ved å bruke en eller to radier som definerer formen − sirkel eller ellipse. Radiusen gjelder for hele bakgrunnen, selv om elementet ikke har noen kantlinje, bestemmes den nøyaktige posisjonen til sekanten ved å bruke bakgrunnsklipp-egenskapen.

Border-radius-egenskapen lar deg runde alle hjørner samtidig, og ved å bruke egenskapene border-top-venstre-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-venstre-radius kan du kan runde hvert hjørne separat.

Hvis du angir to verdier for grenseegenskaper-radius , så vil den første verdien bli avrundet øverst til venstre Og nedre høyre hjørne, og den andre - øverst til høyre Og nede til venstre.

Verdier spesifisert gjennom / bestemmer horisontal Og vertikale radier. Eiendommen går ikke i arv.

Alternativer

Div (bredde: 100px; høyde: 100px; kantlinje: 5px solid;).r1 (kantradius: 0 0 20px 20px;).r2 (kantradius: 0 10px 20px;).r3 (kantradius: 10px 20px ;) .r4 (kantradius: 10px/20px;) .r5 (kantradius: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (kantradius: 10px 20px 30p./x 30p. border-radius: 50%;).r8 (border-top: ingen; border-bottom: ingen; border-radius: 30px/90px;).r9 (border-bottom-venstre-radius: 100px;).r10 (border) -radius: 0 100%;).r11 (kant-radius: 0 50% 50% 50%;).r12 (kant-øvre-venstre-radius: 100% 20px; kant-nederst-høyre-radius: 100% 20px ;)
Ris. 1. Eksempler på ulike alternativer for avrunding av blokkhjørner

2. Border-image

Nettleserstøtte

DVS: 11.0
Firefox: 15,0, 3,5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15,0, 11,0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android-nettleser: 4.4, 4.1 -webkit-
Chrome for Android: 42

Egenskapen lar deg angi et bilde som elementets ramme. Hovedkravet til bildet er at det skal være symmetrisk. Egenskapen inkluderer følgende verdier: (border-image: width source skive repetisjon start;) .

Ved hjelp av dette enkelt bilde Du kan få disse rammene for et element.

/* Eksempel 1 */ div ( width: 260px; høyde: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Eksempel 2 */ div ( width: 260px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30 border-image-repeat: rund);
Ris. 2. Et eksempel på utforming av blokkgrenser ved hjelp av et bilde

Kutt A - B - C - D danner hjørnene på rammen, og delen av bildet som ligger mellom dem fyller det gjenværende rommet i rammen i samsvar med den spesifiserte verdien av egenskapen kant-bilde-gjentakelse. Størrelsen på hjørnedelen (i dette eksemplet tallet 30) er satt ved å bruke verdien av egenskapen border-image-slice.

2.1. kant-bilde-bredde

Egenskapen angir bredden på bildet for elementets kantlinje. Hvis bredden ikke er spesifisert, er den standard til 1.

kant-bilde-bredde
Verdier:
lengde	Angir kantbredden i lengdeenheter - px/em. Du kan angi fra én til fire verdier om gangen. Hvis én verdi er spesifisert, er bredden på alle sidene av rammen den samme, to verdier spesifiserer bredden på toppen-nederst og høyre-venstre, etc.
Antall	Den numeriske verdien som grensebreddeverdien multipliseres med.
%	Bredden på elementets kantlinje beregnes i forhold til størrelsen på bildet. Horisontalt i forhold til bredden, vertikalt - i forhold til høyden.
auto	Tilsvarer verdien for grensebildesnitt.
første
arve

Syntaks

Div (kant-bilde-bredde: 30px;) Fig. 3. Et eksempel på innstilling av bredden på en bilderamme ved hjelp av forskjellige typer verdier

2.2. border-image-source

Egenskapen spesifiserer banen til bildet som skal brukes til å dekorere kantene til blokken.

Syntaks

Div (border-image-source: url(border.png);)

2.3. border-image-slice-elementer

Egenskapen bestemmer størrelsen på bildedelene som brukes til å definere kantene til elementet og deler bildet inn i ni deler: fire hjørner, fire kanter mellom hjørnene og en sentral del.

Verdier:
Antall	Størrelsen på rammedelene kan stilles inn med én, to, tre eller fire verdier. Én verdi setter grensene til å ha samme størrelse på hver side av elementet. To verdier: den første bestemmer størrelsen på topp- og bunnkantene, den andre - høyre og venstre. Tre verdier: den første bestemmer størrelsen på toppkanten, den andre - høyre og venstre, og den tredje - nederste kant. Fire verdier: Definerer størrelsen på topp-, høyre-, bunn- og venstrekanter. Den numeriske verdien representerer antall px.
%	Kantstørrelser beregnes i forhold til bildestørrelsen. Horisontalt i forhold til bredden, vertikalt - i forhold til høyden.
fylle	Verdien er angitt sammen med et tall eller prosent. Hvis det er spesifisert, avskjæres ikke bildet av den indre kanten av rammen, men fyller også området inne i rammen.
første	Setter denne egenskapen til standardverdien.
arve	Arver verdien av denne egenskapen fra det overordnede elementet.

Syntaks

Div (border-image-slice: 50 20;)
Ris. 4. Et eksempel på spesifisering av bilderammestykker

2.4. border-image-repeat

Denne egenskapen kontrollerer hvordan bakgrunnsbildet fyller rommet mellom hjørnene på rammen. Kan spesifiseres med enten en enkelt verdi eller et par verdier.

Syntaks

Div (kant-bilde-gjenta: gjenta;) Fig. 5. Eksempel på repetering av den sentrale delen av en bilderamme ved bruk av ulike typer verdier

2.5. border-image-outset

Egenskapen lar deg flytte bilderammen utover grensene til elementet med en spesifisert lengde. Kan spesifiseres med enten én eller fire verdier.

Syntaks

Div (border-image-outset: 10px;)
Ris. 6. Et eksempel på forskyvning av en bilderamme ved hjelp av forskjellige typer verdier

3. Ytre rammeforskyvning konturforskyvning

Egenskapen spesifiserer avstanden mellom kantelementets kantlinje og ytre kant som er opprettet ved bruk av outline-egenskapen.

/*Figur 1:*/ img ( kantlinje: 1px hel rosa; kontur: 1px stiplet grå; konturforskyvning: 3px; ) /*Figur 2:*/ img ( border-width: 1px 10px; border-style: solid; kantfarge: rosa kontur: 1px stiplet grått;
Ris. 7. Et eksempel på å dekorere et bilde med en ytre ramme

4. Gradientramme

Verdien av kantbilde kan ikke bare være et bilde, men også en gradientfyll.

Gjennomsiktig ramme

En av fargene er gjennomsiktig. På denne måten kan du sette grenser for alle sider av et element samtidig eller separat for hver side. Tykkelsen på kantlinjen styres av egenskapen kantbredde.

* (boksstørrelse:border-box;).wrap (høyde: 200px; polstring: 25px; bakgrunn: #00E4F6; ) .gradient (høyde: 150px; bredde: 50%; margin: 0 auto; kantlinje: 10px solid gjennomsiktig ; border-image: linear-gradient (til høyre, gjennomsiktig 0%, #ADF2F7 100%);

Postkonvolutt

* (boksstørrelse:border-box;).wrap (høyde: 200px; polstring: 25px; ) .gradient (høyde: 150px; bredde: 50%; margin: 0 auto; kant: 10px solid gjennomsiktig; kantbilde: 10 repeterende lineær gradient (45 grader, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px)

Stiller inn avrundingsradiusen til rammehjørnene. Hvis rammen ikke er spesifisert, skjer også avrundingen med bakgrunnen.

kort informasjon

Betegnelser

	Beskrivelse	Eksempel
<тип>	Indikerer typen av verdien.	<размер>
A && B	Verdiene må skrives ut i den angitte rekkefølgen.	<размер> && <цвет>
A | B	Indikerer at du bare trenger å velge én verdi fra de foreslåtte (A eller B).	normal | small-caps
A || B	Hver verdi kan brukes uavhengig eller sammen med andre i hvilken som helst rekkefølge.	bredde || telle
	Grupper verdier.	[ beskjære || kryss ]
*	Gjenta null eller flere ganger.	[,<время>]*
+	Gjenta en eller flere ganger.	<число>+
?	Den angitte typen, ordet eller gruppen er valgfri.	innfelt?
(A, B)	Gjenta minst A, men ikke mer enn B ganger.	<радиус>{1,4}
#	Gjenta én eller flere ganger atskilt med komma.	<время>#

×

Verdier

Det er tillatt å bruke én, to, tre eller fire verdier, og liste dem atskilt med et mellomrom (tabell 1). Det er også akseptabelt å skrive to verdier atskilt med en skråstrek (/). Verdiene er tall i alle formater som er akseptable for CSS. Ved bruk av prosenter er tellingen i forhold til blokkens bredde.

I tilfellet med å spesifisere to parametere gjennom en skråstrek, spesifiserer den første parameteren radius horisontalt, og den andre - vertikalt (elliptiske hjørner). I fig. Figur 1 viser forskjellen mellom et vanlig avrundet hjørne og et elliptisk hjørne.

Ris. 1. Avrundingsradius for å lage ulike typer hjørner

Sandkasse

Ole Brumm var alltid ikke uvillig til en liten forfriskning, spesielt klokken elleve om morgenen, for på den tiden var frokosten for lengst over, og lunsjen hadde ennå ikke begynt. Og selvfølgelig ble han fryktelig glad for å se at kaninen tok fram kopper og tallerkener.

div (bakgrunn: #e4efc7; border: 1px solid #333; polstring: 10px; border-radius: 0; )

Eksempel

Resultat dette eksemplet vist i fig. 2.

Ris. 2. Avrundingsradier

Objektmodell

En gjenstand.style.borderRadius

Merk

Chrome før versjon 4.0, Safari før versjon 5.0 og Android før versjon 2.1 bruker egenskapen -webkit-border-radius.

Firefox før versjon 4.0 bruker egenskapen -moz-border-radius.

Spesifikasjon

Hver spesifikasjon går gjennom flere stadier av godkjenning.

• Anbefaling - Spesifikasjonen er godkjent av W3C og anbefales som standard.
• Kandidatanbefaling ( Mulig anbefaling) - gruppen ansvarlig for standarden er fornøyd med at den oppfyller sine mål, men krever hjelp fra utviklingsmiljøet for å implementere standarden.
• Foreslått anbefaling Foreslått anbefaling) - på dette stadiet sendes dokumentet til W3C Advisory Council for endelig godkjenning.
• Arbeidsutkast - En mer moden versjon av et utkast som har blitt diskutert og endret for gjennomgang av fellesskapet.
• Redaktørens utkast ( Redaksjonelt utkast) - et utkast til standarden etter endringer ble gjort av prosjektredaktørene.
• Utkast ( Utkast til spesifikasjon) - det første utkastet til standarden.

×

Jeg er sikker på at du allerede er kjent med egenskapen border css. Vil du lære noe nytt du ikke visste fra før om css border? Vel, ikke bare vil du lære, men du vil også se flere nye ting du aldri visste før!

Ikke bare kan CSS3 brukes til å lage avrundede hjørner, men ren CSS-kode kan også brukes til å lage komplekse former. Tidligere kunne du bruke bakgrunnsbilde for å skape utseendet til avrundede hjørner. Takket være nye teknikker for bruk av border, kan vi gjøre dette med ren CSS-kode.

Grunnleggende om bruk av css border

Du er sikkert allerede kjent med standard bruk grenseegenskaper:

Kant: 1px helt svart;

Koden ovenfor vil sende ut en 1px kant som vil være svart. Enkelt og greit. Du kan også utvide syntaksen litt:

Kantbredde: tykk; border-stil: solid; kantfarge: svart;

Som et tillegg kan du bruke spesifikke verdier for grensebredde-egenskapen, tre søkeord: tynn, middels, tykk.

Men å bruke den utvidede syntaksen er ikke alltid praktisk. La oss se på et eksempel når du trenger å endre fargen på en blokkramme når du holder musen. I dette tilfellet er det mye enklere å bruke stenografisyntaksen:

Box ( kantlinje: 1px solid rød; ) .box:hover ( kantlinje: 1px solid grønn; )

En mer elegant og enklere måte å gjøre dette på er:

Box ( kantlinje: 1px solid rød; ) .box:hover ( kantfarge: grønn; )

Som du kan se, er den avanserte teknikken også nyttig når vi bare endrer noen egenskaper: bredde, stil, farge og andre.

Grense-radius

Grense-radius– Dette er den «gyldne» egenskapen til CSS3 – den første, mest vanlige egenskapen som har blitt praktisk og nyttig. Bortsett fra IE8 og versjoner nedenfor, viser alle nettlesere avrundede hjørner ved å bruke dette.

Selv om det er nødvendig å bruke spesielle prefikser for Webkit og Mozilla for at stylingen skal være riktig.

Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

I dag kan vi fjerne de spesielle prefiksene og bruke standard kantradiusform.

En annen fordel er at vi kan bruke spesielle verdier for hver side av blokken:

Border-top-venstre-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; kant-nederst-venstre-radius: 0;

I koden ovenfor kan å sette kant-øverste-høyre-radius og kant-nederst-venstre-radius til "null" oppnå noen fantastiske former. Selv om elementet kan arve noen egenskaper som må tilbakestilles.

I likhet med marg og polstring kan vi komprimere syntaksen:

/* øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre */ border-radius: 20px 0 30px 0;

Som et eksempel på bruk av egenskapen border-radius, vil jeg vise deg en "sitron" som designere ofte bruker når de designer nettsteder:

Sitron ( bredde: 200px; høyde: 200px; bakgrunn: #F5F240; kantlinje: 1px solid #F0D900; kantradius: 10px 150px 30px 150px; )

La oss gå utover det grunnleggende

Mange designere har all kunnskapen inne css-områder grenseeiendommer slutter her. Men det er noen andre kule ting du kan bruke til å lage fantastiske ting!

Komplekse css-kantstrukturer

Det er mange teknikker for å lage design ved hjelp av komplekse grensestrukturer. La oss for eksempel se på følgende...

Border-stil

Vi bruker alltid de mest kjente egenskapene solid, stiplet og stiplet. Men det er et par andre egenskaper i grensestil: rille og rygg.

Border: 20px groove #e3e3e3;

Eller i utvidet syntaks:

Kantfarge: #e3e3e3; kant-bredde: 20px; border-stil: groove;

Selv om disse egenskapene er nyttige, er de ikke grunnlaget for å lage komplekse rammer.

Disposisjon

Den mest populære teknikken for å lage en dobbel kant er å bruke disposisjonsegenskapen.

Boks ( kantlinje: 5px solid #292929; disposisjon: 5px solid #e3e3e3; )

Denne metoden fungerer utmerket, selv om den begrenser oss til bare to rammer. Noen ganger må du lage en gradientkant som består av mange lag... hvordan da?

Pseudo-elementer

Når disposisjonsteknikken ikke er tilstrekkelig, er et alternativt middel å bruke pseudoelementene:før og:etter. Med denne kan du legge til flere rammer til et element:

Boks ( bredde: 200px; høyde: 200px; bakgrunn: #e3e3e3; posisjon: relativ; kantlinje: 10px solid grønn; ) /* Lag to bokser med samme bredde på beholderen */ .box:after, .box:before ( innhold: ""; posisjon: absolutt venstre: 0;

Det ser ikke særlig elegant ut, men det fungerer i det minste. Det er litt vanskelig å finne ut sekvensen av farger innenfor rammene... men du kan finne ut av det.

Box-Shadow

En interessant "barns måte" å skape en lignende effekt på er å bruke CSS3 box-shadow-egenskapen:

Boks ( kantlinje: 5px helrød; boksskygge: 0 0 0 5px grønn, 0 0 0 10px gul, 0 0 0 15px oransje; )

I dette tilfellet var vi smartere og brukte en dedikert box-shadow-eiendom. Ved å endre x, y, uskarphet parametere til null, kan vi bruke forskjellige farger for å lage flere rammer.

Men det er et problem: i eldre nettlesere som ikke forstår box-shadow-egenskapen, vil bare én 5px rød ramme være synlig.

"Huske! Nettstedets design skal se ut på tvers av nettlesere, det vil si den samme i alle nettlesere. Inkludert eldre versjoner."

Endre vinkler

I tillegg til den som brukes enkel betydning border-radius, kan vi spesifisere to separate - ved å skille dem gjennom / vil vi indikere horisontal og vertikal radius.

For eksempel:

Kantradius: 50px / 100px; /* horisontal radius, vertikal radius */

... dette tilsvarer:

Border-top-venstre-radius: 50px 100px; border-top-right-radius: 50px 100px; kantlinje-nederst-høyre-radius: 50px 100px; kantlinje-nederst-venstre-radius: 50px 100px;

Denne teknikken er egnet for å lage unike blokkformer. Slik lager du for eksempel en innpakket papireffekt:

Boks (bredde: 200px; høyde: 200px; bakgrunn: #666; kant-top-venstre-radius: 15em 1em; kantlinje-nederst-høyre-radius: 15em 1em;)

CSS-skjemaer ved hjelp av kantlinje

Denne teknikken viser hvordan du kan lage CSS-skjemaer, mens du bruker elementer med null dimensjoner høyde og bredde. Overrasket? La oss se på et eksempel...

For de neste eksemplene vil vi bruke følgende markering:

...og følgende grunnleggende stil:

Boks (bredde: 200px; høyde: 200px; bakgrunn: svart; )

Mest vanlig eksempel ved å bruke CSS-skjemaer - lage en flytende pil. Hemmeligheten til denne pilen ligger i å lage en kant med en annen farge for hver side. Sett deretter bredde- og høydeattributtene til 0.

Tilordne til div blokk pil klasse:

Pil ( bredde: 0; høyde: 0; kant-øverst: 100 piksler solid rød; kant-høyre: 100 piksler ensfarget grønn; kant-bunn: 100 piksler helt blå; kant-venstre: 100 px solid gul; )

For å demonstrere bruker vi først den utvidede syntaksen. Deretter kan vi fjerne ekstrakoden ved å bruke stenografisyntaksen:

Pil ( bredde: 0; høyde: 0; kantlinje: 100 px solid; kantfarge: rød grønn blå gul; )

Interessant, ikke sant? Nå skal vi sette gjennomsiktige farger på alle sider unntatt den blå siden.

Pil ( bredde: 0; høyde: 0; kantlinje: 100 px solid; kant-bunn-farge: blå; )

Det ble kjempebra! Men dette motsier semantisk layout, lag en .arrow div, bare for å legge til en pil på siden. Til dette formålet kan vi bruke pseudo-elementer, som er det vi skal gjøre nå.

Lag en taleboble

For å lage en taleboble trenger vi en liten bit ren CSS kode og en div-blokk.

Snakkeboble ( posisjon: relativ; bakgrunnsfarge: #292929; bredde: 200px; høyde: 150px; linjehøyde: 150px; /* vertikalt midtstilt */ farge: hvit; tekstjustering: senter; )

Snakkeboble:etter ( innhold: ""; )

På dette stadiet vil vi lage pilen som vi laget før, legge den til elementet og alt som gjenstår er å plassere den:

Snakkeboble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 10px solid; kantfarge: rød grønn blå gul; )

Hvis vi vil at pilen skal peke nedover, må vi sette alle grenser til transparente bortsett fra den øverste.

Snakkeboble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 10px solid; kant-topp-farge: rød; )

Når vi lager dette CSS-form, kan vi ikke spesifikt angi størrelsen på pilen. I stedet kan vi angi egenskapen border-width, som vil tilordne en størrelse til pilen. Vi vil også sette posisjonen til pilen nederst i midten. Følgelig bruker vi verdiene øverst og venstre for dette.

Snakkeboble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 15px solid; kant-top-farge: rød; topp: 100 %; venstre: 50 %; )

I tillegg trenger vi bare å gi den samme farge som blokken. Husk at når du posisjonerer, må du ta hensyn til størrelsen på de andre kantene, som er usynlige (15px). Vi vil også gi blokken avrunding i hjørnene.

Snakkeboble ( /* … andre stiler */ kantradius: 10px; ) .taleboble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 15 piksler fast; border-top -farge: #292929 topp: 100% margin-venstre: /* juster for kantbredde */ )

Ikke verst, hva? Ved å bruke flere CSS-klasser og grensetriks kan du lage noe slikt.

/* Bruk av talebobler: Bruk klasse .speech-bubble og .speech-bubble-DIRECTION som vist nedenfor

*/ .taleboble ( posisjon: relativ; bakgrunnsfarge: #292929; bredde: 200px; høyde: 150px; linjehøyde: 150px; /* vertikalt midtstilt */ farge: hvit; tekstjustering: senter; kant- radius: 10px; font-family: sans-serif; ) .speech-bubble:after ( innhold: ""; posisjon: absolutt; bredde: 0; kant: 15px solid; ) /* Plasser pilen */ .speech-bubble-top:after ( border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after ( border-venstre-color : #292929; venstre: 100%; margin-top: -15px; ; ) .speech-bubble-left:after ( kant-høyre-farge: #292929; topp: 50%; høyre: 100%; margin-top: -15px; )

Bonus! Vertikal sentrering innenfor blokken

For én tekstlinje kan du bruke linjehøyde. Men hvis du har to eller flere linjer tekst... Den beste løsningen ville være å sette display-egenskapen til tabell, og legge all teksten i et avsnitt. Slik ser det ut i html-oppmerking: