Html afrundede hjørner. Yderramme offset konturforskydning

CSS3 ramme supplerer evnen til at formatere elementkanter med egenskaber, der tillader det rundt om hjørnerne element, og også bruge Billeder at designe kanten af ​​elementet.

Afrundede hjørner og billedrammer

1. Afrunding af hjørner med kant-radius

Browser support

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android browser: 4.1
Chrome til Android: 44

Ejendommen giver dig mulighed for at runde hjørnerne af små bogstaver og blokelementer. Kurven for hver vinkel er defineret ved hjælp af en eller to radier, der definerer dens form − cirkel eller ellipse. Radiussen gælder for hele baggrunden, selvom elementet ikke har nogen kant, bestemmes den nøjagtige position af sekanten ved hjælp af egenskaben background-clip.

Egenskaben border-radius giver dig mulighed for at runde alle hjørner på én gang, og ved at bruge egenskaberne border-top-venstre-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-venstre-radius egenskaberne kan runde hvert hjørne separat.

Hvis du angiver to værdier for grænse-radius egenskaber, så vil den første værdi blive afrundet øverst til venstre Og nederste højre hjørne, og den anden - øverst til højre Og nederst til venstre.

Værdier specificeret gennem/bestemme vandret Og lodrette radier. Ejendommen går ikke i arv.

Muligheder

Div (bredde: 100px; højde: 100px; kant: 5px solid;).r1 (kant-radius: 0 0 20px 20px;).r2 (kant-radius: 0 10px 20px;).r3 (kant-radius: 10px 20px;). ; ;) .r4 (kant-radius: 10px/20px;) .r5 (kant-radius: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (border-radius: 10px 0px 30px)/7px 0px 30px) ( 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 (border-radius: 0 50% 50% 50%;).r12 (border-top-venstre-radius: 100% 20px; border-bottom-right-radius: 100% 20px ;)
Ris. 1. Eksempler forskellige muligheder afrunde blokhjørner

2. Border-billede

Browser support

IE: 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 browser: 4.4, 4.1 -webkit-
Chrome til Android: 42

Egenskaben giver dig mulighed for at indstille et billede som elementets ramme. Hovedkravet til billedet er, at det skal være symmetrisk. Egenskaben indeholder følgende værdier: (border-image: width source slice gentage start;) .

Ved hjælp af dette enkelt billede Du kan få disse rammer til et element.

/* Eksempel 1 */ div ( width: 260px; højde: 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; højde: 100px; 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å design af blokgrænser ved hjælp af et billede

Udskæringer A - B - C - D danner hjørnerne af rammen, og den del af billedet, der er placeret mellem dem, udfylder det resterende rum af rammen i overensstemmelse med den angivne værdi af egenskaben border-image-repeat. Hjørnestørrelse (in i dette eksempel dette er tallet 30) er angivet ved hjælp af værdien af ​​egenskaben border-image-slice.

2.1. border-image-width

Egenskaben angiver bredden af ​​billedet for elementets kant. Hvis bredden ikke er angivet, er den som standard 1.

border-image-width
Værdier:
længde	Indstiller kantbredden i længdeenheder - px/em. Du kan indstille fra én til fire værdier ad gangen. Hvis en værdi er angivet, så er bredden af ​​alle sider af rammen den samme, to værdier angiver bredden af ​​øverste nederste og højre-venstre osv.
nummer	Den numeriske værdi, som grænsebreddeværdien ganges med.
%	Bredden af ​​elementets kant beregnes i forhold til størrelsen af ​​billedet. Vandret i forhold til bredden, lodret - i forhold til højden.
auto	Svarer til værdien for kant-billede-udsnit.
initial
arve

Syntaks

Div (kant-billedbredde: 30px;) Fig. 3. Et eksempel på indstilling af bredden af ​​en billedramme vha forskellige typer værdier

2.2. border-image-source

Egenskaben angiver stien til billedet, der skal bruges til at dekorere blokkens grænser.

Syntaks

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

2.3. border-image-slice elementer

Egenskaben bestemmer størrelsen af ​​de dele af billedet, der bruges til at danne kanterne af elementet og opdeler billedet i ni dele: fire hjørner, fire kanter mellem hjørnerne og centrale del.

Værdier:
nummer	Størrelsen på rammedelene kan indstilles ved hjælp af en, to, tre eller fire værdier. En værdi indstiller grænserne til at have samme størrelse på hver side af elementet. To værdier: den første bestemmer størrelsen af ​​de øverste og nederste grænser, den anden - højre og venstre. Tre værdier: den første bestemmer størrelsen på den øverste kant, den anden - højre og venstre, og den tredje - nederste kant. Fire værdier: Definerer størrelsen af ​​den øverste, højre, nederste og venstre kant. Den numeriske værdi repræsenterer antallet af px.
%	Kantstørrelser beregnes i forhold til billedstørrelsen. Vandret i forhold til bredden, lodret - i forhold til højden.
fylde	Værdien er angivet sammen med et tal eller en procentdel. Hvis det er angivet, afskæres billedet ikke af den indvendige kant af rammen, men udfylder også området inde i rammen.
initial	Indstiller denne egenskab til dens standardværdi.
arve	Arver værdien af ​​denne egenskab fra det overordnede element.

Syntaks

Div (border-image-slice: 50 20;)
Ris. 4. Et eksempel på angivelse af billedrammeudsnit

2.4. border-image-repeat

Denne egenskab styrer, hvordan baggrundsbilledet udfylder rummet mellem rammens hjørner. Kan angives ved hjælp af enten en enkelt værdi eller et par værdier.

Syntaks

Div (kant-billede-gentag: gentag;) Fig. 5. Eksempel på gentagelse af den centrale del af en billedramme ved hjælp af forskellige typer værdier

2.5. border-image-outset

Egenskaben giver dig mulighed for at flytte billedrammen ud over elementets grænser med en specificeret længde. Kan angives med enten en eller fire værdier.

Syntaks

Div (border-image-outset: 10px;)
Ris. 6. Et eksempel på forskydning af en billedramme ved hjælp af forskellige typer værdier

3. Yderramme offset konturforskydning

Egenskaben angiver afstanden mellem kantelementets kant og den ydre kant, der er oprettet ved hjælp af outline-egenskaben.

/*Figur 1:*/ img ( kant: 1px ensfarvet pink; omrids: 1px stiplet grå; konturforskydning: 3px; ) /*Figur 2:*/ img ( border-width: 1px 10px; border-style: solid; kantfarve: pink; kontur: 1px stiplet grå; konturforskydning: 3px; ) /*Figur 3:*/ img (kant: 3px indsat pink; kontur: 1px stiplet grå; konturforskydning: 1px; )
Ris. 7. Et eksempel på at dekorere et billede med en ydre ramme

4. Gradientramme

Værdien af ​​border-image kan ikke kun være et billede, men også et gradientfyld.

Gennemsigtig ramme

En af farverne er gennemsigtig. På denne måde kan du sætte grænser for alle sider af et element på én gang eller separat for hver side. Tykkelsen af ​​grænsen styres af egenskaben for grænsebredde.

* (box-sizing:border-box;).wrap (højde: 200px; polstring: 25px; baggrund: #00E4F6; ) .gradient (højde: 150px; bredde: 50%; margin: 0 auto; kant: 10px solid transparent ; border-image: linear-gradient (til højre, transparent 0%, #ADF2F7 100%); border-image-slice: 1; )

Postkuvert

* (box-sizing:border-box;).wrap (højde: 200px; polstring: 25px; ) .gradient (højde: 150px; bredde: 50%; margin: 0 auto; kant: 10px solid gennemsigtig; border-image: 10 gentagende-lineær-gradient(45 grader, #A7CECC, #A7CECC 10px, gennemsigtig 10px, gennemsigtig 20px, #F8463F 20px, #F8463F 30px, gennemsigtig 30px, gennemsigtig 40px); )

Afrundede hjørner i CSS kan gøres på mange måder, rigtig mange, og nogle af dem kan betragtes som forældede, da CSS 3 introducerede nye egenskaber, der giver dig mulighed for at runde hjørnerne af HTML-elementer. Men for det første understøtter ældre browsere ikke disse egenskaber, og for det andet bliver sådanne ideer nogle gange født i en designers kreative hjerne, som kun de gamle metoder kan gemme. Derfor vil vi her se på flere forskellige muligheder for at skabe afrundede hjørner i CSS: fra de enkleste til ret komplekse.

I disse eksempler er hjørnerne af de oprindelige blokelementer afrundede, og i nogle eksempler er disse blokke brugt som hjælpeelementer. Men husk at du sagtens kan gøre det samme med line-level elementer, forudindstille dem med blok eller inline-blok hvis nødvendigt.

Afrundede hjørner i CSS 3 uden billeder

Dette eksempel bruger egenskaber fra CSS 3, der giver dig mulighed for nemt at runde hjørner uden hjælp af billeder.

HTML og CSS Eksempel: Afrunding af hjørner med CSS 3 uden billeder

Beskrivelse af eksemplet

1. Til at runde hjørner bruger vi CSS ejendom 3, som forstås af alle moderne browsere.
2. For ældre browsere Firefox, Chrome og Safari bruger vi specielle egenskaber med præfikserne -moz- og -webkit-, som dukkede op, før hovedegenskaben blev understøttet. Desværre er der ingen lignende analoger til gamle Opera og IE. Bemærk venligst, at når du opretter komplekse kurver, fungerer egenskaber med præfikser muligvis ikke korrekt. Derfor var de i CSS-koden anført højere end hovedejendommen, så der iflg stilprioriteter, browsere, der allerede forstår "ren", brugte det.

Egenskaber med præfikser er ikke i CSS-specifikationen, så brug af dem vil resultere i ugyldig kode.

Afrundede hjørner i CSS uden billeder

Dette eksempel har heller ikke billeder, men bruger yderligere blokke. Essensen af ​​metoden er, at før og efter hovedindholdet er angivet flere blokke, som, når de bevæger sig væk fra det, gradvist aftager i bredden ved hjælp af laterale ydre marginer. Takket være dette opstår efterligningen af ​​afrundede hjørner.

Denne metode er dårlig, fordi koden er "strøet" yderligere blokke, men i mange eksempler vil sådanne blokke desværre være til stede. Et andet minus er hvornår store radier afrunding, skal du tilføje endnu flere blokke, end der er brugt i eksemplet.

HTML og CSS Eksempel: Afrunding af hjørner uden at bruge billeder

Beskrivelse af eksemplet

1. Inde i blokken med klasse = "blok" angiver vi et element for hovedindholdet ("content_block"), foran hvilket vi placerer blokke for at simulere afrunding af hjørner ("b1" , "b2" , "b3" ). Efter det sætter vi dem det samme, men i omvendt rækkefølge.
2. Vi indstiller simuleringsblokkene til den nødvendige højde og sidemargener (CSS) for at skabe udseendet af hjørner. Vi nulstiller også deres skriftstørrelse (CSS) og indstiller den til :hidden - dette er beregnet til ældre browsere, der kan øge højden og gøre den større end specificeret.
3. I dette eksempel blev der, ud over at runde hjørnerne, også tilføjet en efterligning af en ramme. Hvis du ikke har brug for det, skal du blot fjerne alle "kanter" fra elementerne og fjerne fra "b3"-blokken baggrundsfarve.

Den nemmeste måde at få afrundede hjørner til at fremstå i CSS er at bruge et billede som baggrund for elementet. I dette tilfælde er dimensionerne af elementet normalt specificeret det samme som størrelsen på baggrundsbilledet. Ulempen ved denne metode er, at indholdet af elementet ikke bør strække sig ud over dets omfang, det vil sige, at det skal være af en vis begrænset størrelse.

HTML og CSS eksempel: Afrunding af hjørner ved hjælp af ét billede

Beskrivelse af eksemplet

1. Ved at bruge CSS-egenskaben indstiller vi et baggrundsbillede til blokken, som vi forbyder at replikere lodret og vandret (ingen gentagelse), da dette ikke er påkrævet.
2. For at forhindre teksten inde i blokken i at røre dens kanter, indstiller vi dens polstring (CSS) til 5px på hver side.
3. Dernæst skal du indstille blokken til de samme dimensioner som baggrunden. Vores baggrundsbillede har dimensioner på 140x32 pixels, men vi angiver bredden (CSS) og højden (CSS) af selve blokken, reduceret med 10px. Jeg var nødt til at reducere det på grund af de samme interne polstringer, som også udvider elementet med 5px i hver retning.

I det foregående eksempel var blokstørrelsen fastsat og afhang af størrelsen på baggrundsbilledet, og det er meget ubelejligt. Nu vil vi gøre bredden af ​​vores blok kan ændres. For at gøre dette skal du skære tre dele af billedet ud - siderne og et stykke af midten. Derefter vil vi placere to elementer med faste størrelser inde i hovedblokken, som takket være absolut positionering vil blive placeret på siderne. Lad os give dem de samme sidedele som baggrunden og den centrale del til hovedblokken. Dette vil give os en blok med afrundede hjørner og en variabel bredde.

Denne teknik bruges meget ofte til at afrunde enkeltlinjeelementer, såsom links eller sektions-/menutitler.

HTML og CSS Eksempel: Afrunding af hjørner ved hjælp af sideblokke

Beskrivelse af eksemplet

1. Inde i blokklassen = "blok" placerer vi to elementer - "left_bok" og "right_bok", hvortil vi sætter billeder af sidedelene som baggrund (CSS) og forbyder deres reproduktion (ingen gentagelse). For selve hovedblokken indstiller vi baggrunden fra den centrale del og tillader den kun at blive duplikeret vandret (repeat-x).
2. Vi angiver bredden for sideblokkene svarende til størrelsen på baggrunden; for os er det 14x32 pixels. Men for hovedblokken, som i det foregående eksempel, satte vi højden til 22px for at kompensere for den lodrette polstring.
3. Vi vil placere vores sidevægge i forhold til "blok", så vi specificerer :relative for det, og absolut for sidevæggene selv. Nå, så presser vi dem til de tilsvarende sider af forælderen ved hjælp af CSS-egenskaberne og .
4. For at forhindre, at indholdet af blokken bliver skjult under sidebillederne, sætter vi "blok" til at have sidepolstring (CSS), som kan være lig med eller lidt større end selve siderne. Vi sætter også små marginer i top og bund, så teksten ikke "klæber" til kanterne.

I IE6 er der en lille fejl med denne metode:

Hvis bredden eller højden af ​​"blok" er ulige, vil en ubehagelig 1px fordybning fremkomme mellem den indvendige kant af blokken og den højre placerede sidebjælke, hvilket vil ødelægge hele billedet. Denne fejl kan rettes ved at bruge CSS hack med et bestemt udtryk, men jeg vil ikke engang give et sådant eksempel her, da det ofte fryser browseren, og det er bedre ikke at bruge det.

Lad os gøre det anderledes. Lad os sætte "right_bok" venstre margin (CSS) til 100%, så den bevæger sig ud over den højre kant af hovedblokken, og derefter returnere den tilbage og flytte den til venstre med et antal pixels svarende til dens bredde. IE6 fungerer korrekt med værdierne for disse egenskaber, så den har intet andet valg end at placere blokken, hvor vi har brug for den.

Denne metode til afrunding af hjørner ligner den forrige, men i modsætning til den er det her ikke HTML-elementer, der er placeret på siderne, men dem, der tilføjes til hovedblokken pseudo elementer. Takket være denne tilgang var det muligt at slippe af med den unødvendige HTML-kode på siden.

HTML- og CSS-eksempel: Afrunding af hjørner ved hjælp af side-pseudo-elementer

Beskrivelse af eksemplet

1. Ved hjælp af CSS pseudo-elementer angiver vi, at vi ønsker at tilføje noget til begyndelsen og slutningen af ​​hovedblokken. Og ved at bruge CSS-egenskaben tilføjer vi bare de nødvendige billeder af afrundede hjørner eller rettere siderne. Så vi skabte to pseudo-elementer med billeder.
2. Nå, så gør vi præcis det samme som i det foregående eksempel, kun vi arbejder med de oprettede pseudo-elementer.

Til IE6 og IE7 blev følgende "krykker" brugt i dette eksempel:

1. Som du ved, forstår IE6 og IE7 ikke de pseudo-elementer, der bruges her, så vi gør følgende. Vi bruger expression, som integrerer to tags inde i hovedelementet, og vi giver dem de samme stilarter som i det foregående eksempel. Bemærk, at den indsprøjtede kode, der kommer efter den første innerHTML, tilføjes umiddelbart efter den indledende "blok"-tag, og efter den anden innerHTML tilføjes den før den afsluttende tag. Ja, i vores tilfælde betyder det ikke noget, da absolut positionering bruges, men nogle gange er det nyttigt at vide om det.
2. For at forhindre denne kode i at blive set af andre browsere, vedlægger vi den i betingede kommentarer. Det ville være bedre, hvis du lægger det i en separat CSS-fil, som er forbundet med et tag lukket med de samme kommentarer.

Afrundede hjørner i CSS ved hjælp af blokindpakning

Essensen af ​​denne metode er, at først hjørnerne af billedet skæres ud. Derefter placeres flere blokke (i henhold til antallet af hjørner) inde i hovedblokken, som er indlejret inde i hinanden. Hver af dem får et billedhjørne som baggrund. Billeder er forbudt at gengive og koordinater er angivet, så de finder sted i hjørnerne af blokkene. Sådan opnås effekten af ​​afrundede hjørner.

HTML og CSS Eksempel: Afrunding af hjørner ved hjælp af blokombrydning

Beskrivelse af eksemplet

1. Vi placerer fire mere inde i hovedblokken. Da ingen af ​​disse blokke har marginer eller kanter, og kun den inderste har fordybninger, er de alle lige store i højden og bredden.
2. Ved at bruge CSS-egenskaben sætter vi hver af de indre blokke til et hjørne som baggrund, forbyder dem at reproducere og placerer dem i hjørnerne af blokkene. Og da baggrundsfarven på elementerne er gennemsigtig, er alle fire baggrundshjørner synlige på siden.
3. Tilføj den ønskede baggrundsfarve til den ydre blok med hjørnet. Alt er klar.

Du kan udtrykkeligt indstille blokbredden ved at angive den ønskede egenskab i class="block" , men for at ændre højden skal du bruge det inderste element (for os er det "rb").

Afrundede hjørner i CSS ved hjælp af positionering

Også her er der skåret hjørner ud til baggrunden, som vil blive angivet på de små blokke. Ved at bruge CSS absolut positionering placeres disse blokke i hjørnerne af det angivne hovedelement ønsket farve baggrund.

HTML og CSS Eksempel: Afrunding af hjørner ved hjælp af positionering

Beskrivelse af eksemplet

1. Inde i hovedelementet (class= "blok") placerer vi fire tags med klasserne "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , som vil fungere som hjørneblokke.
2. Ved hjælp af CSS-egenskaben forbinder vi vores eget baggrundsbillede til hver hjørneblok og giver dem en bredde og højde svarende til disse baggrundsbilleder. For en sikkerheds skyld nulstiller vi skriftstørrelsen (CSS) og trimmer overskydende (CSS).
3. Vi specificerer relativ positionering for hovedelementet (CSS:relativ), da vi vil placere hjørneblokkene i forhold til det, og for hjørnerne selv - absolut (absolut).
4. Ved at bruge CSS-egenskaberne , og , angiver vi lodrette og vandrette offset-afstande for hjørneblokkene, så de er placeret i hjørnerne af hovedblokken.

Der er et par problemer med denne metode i IE6:

1. Hvis bredden af ​​"blok" ikke er udtrykkeligt angivet, falder hjørnerne til venstre ikke på plads. Årsagen til dette er tilstedeværelsen af ​​intern polstring i blokken. Den nemmeste måde at løse problemet på er at fjerne fordybningen og omslutte hovedindholdet af "blok" (uden hjørner) i en ekstra blokindpakning og derefter angive den nødvendige fordybning ved omslaget. Men jeg gjorde det anderledes her ved at aktivere layoutet ved hjælp af zoom:1-egenskaben, som fortæller IE6 at vise elementet i dets naturlige størrelse. Denne egenskab er ugyldig, så hvis du beslutter dig for at bruge den, anbefaler jeg, at du laver forbindelsen via betingede kommentarer.
2. Den samme fejl på én pixel, som blev diskuteret ovenfor. Men her kan der ikke kun dannes huller mellem de højre hjørner og højre side blok, men også under. Og hvis vi slap af med hullerne til højre, så vil dette ikke fungere med de nederste. Løsningen er eksplicit at angive en jævn bredde og højde af hovedelementet. Du kan også indstille ulige værdier, men så skal du indstille de nedadgående og højre offset-afstande til ikke at være nul, men -1px.

I det væsentlige er teknologien til denne metode til afrunding af hjørner i CSS den samme som den forrige, så detaljerede kommentarer vil blive udeladt her. Den eneste forskel er, at i stedet for separate baggrundshjørnebilleder, bruges et fælles sprite-billede her. Takket være dette indlæses webstedet hurtigere, fordi et billede "vejer" mindre end fire og hosting der er én appel i stedet for fire.

En sprite er et billede, der kombinerer flere billeder, der bruges som baggrund for webstedselementer. Hvilken del af spriten der vil være baggrunden for et bestemt HTML-element afhænger af koordinaterne angivet i en speciel CSS-egenskab.

HTML og CSS Eksempel: Afrunding af hjørner ved hjælp af positionering og sprites

Beskrivelse af eksemplet

1. Ved hjælp af CSS-egenskaben forbinder vi et baggrundsspritebillede til hjørneblokkene, som har en rund form med dimensioner på 22x22 pixels (11x11 pixels for hvert kvart hjørne).
2. Ved at bruge CSS-egenskaben angiver vine. For eksempel betyder en værdi på -11px 0, at baggrunden vil blive forskudt til venstre med 11px på X-aksen, men ikke forskudt på Y-aksen. Således går den venstre halvdel af spriten ud over elementets grænse, og kun den højre er tilbage. Men den er kun halvt synlig, da dens højde er 22px, og højden på selve hjørneblokken kun er 11px. Så det viser sig, at når givet værdi Baggrunden for elementet vil være den øverste højre fjerdedel af spriten.

Med IE6 er der de samme problemer som i det foregående eksempel.

I dette eksempel vil vi runde hjørnerne af et element, der har en kant, men dette er ikke et specifikt træk ved denne særlige metode - du kan sagtens bruge en afrunding med en kant i de foregående eksempler.

Vi laver selve afrundingerne ved hjælp af pseudo-elementer oprettet fra hovedblokken, men uden at anvende positionering på dem.

Og et øjeblik. I de foregående eksempler blev hjørnerne skåret ud sammen med baggrunden indeni, og det er ikke altid nødvendigt, især hvis det forventes, at baggrunden for en blok med afrundede hjørner vil være uensartet. Derfor blev baggrunden inde i rammen her gjort gennemsigtig (dette tillader PNG-format) og når hjørnerne blev skåret ud - deres indre del viste sig også at være gennemsigtig. Hvis det er nødvendigt, kan du også bruge en lignende tilgang i de foregående eksempler.

HTML og CSS Eksempel: Afrunding af hjørner ved hjælp af pseudo-elementer

baggrund , og ved hjælp af den placerer vi dem i højre side og vi forbyder "gengivelse". Det er det, hjørnerne er klar.

Da vi specificerede polstring for "blok" (CSS), er pseudo-elementerne, og derfor hjørnerne, ikke placeret i hjørnerne af blokken, men er 15 px væk fra kanterne. For at rette op på dette giver vi pseudoelementerne negative marginer (CSS) på de nødvendige sider for at placere dem oven på indrykningerne. Men vi gør marginerne lig med ikke 15, men 17px, dette er nødvendigt for at dække rammen (CSS), hvis bredde er 2px (15+2=17). Det er det nu.

Til IE6 og IE7 brugte vi de allerede velkendte "krykker" med indsprøjtning af HTML-kode her, da disse browsere ikke forstår de pseudo-elementer, der bruges her:

1. Ved hjælp af expression integrerer vi to tags inde i hovedelementet, som vi også konverterer til blokke. Så sætter vi et mærke i dem. Og så har disse tags de samme egenskaber som pseudo-elementer. Det eneste er, at vi desuden tilføjer CSS-egenskaben :relative, uden hvilken rammen overlapper hjørnerne.

Ulempen ved denne metode er, at du ikke eksplicit kan indstille højden af ​​en blok med afrundede hjørner, for hvis den overstiger indholdets størrelse, vil de nederste hjørner ikke blive presset mod kanterne. Dette kan undgås, hvis du stadig omslutter hovedindholdet i en anden blok og indstiller dets højde.

Et andet eksempel på afrunding af hjørner med pseudo-elementer og uden yderligere blokke

Dette eksempel ligner det foregående, men her bruger vi positionering til at arrangere pseudo-elementerne. Takket være denne tilgang blev det muligt eksplicit at angive højden af ​​en blok med afrundede hjørner.

HTML og CSS eksempel: Afrunding af hjørner, hvor du kan ændre højden på blokken

Og igen for IE6 og IE7 tilføjer vi flere yderligere elementer ved at bruge udtryk og lukke koden i betingede kommentarer. Kun denne gang vil vi ikke engang forsøge at efterligne pseudo-elementer, men vil gøre det enklere.

1. Vi tilføjer fire tags inde i "blok" og anvender positionering på dem. Og så viser vi dem simpelthen billedhjørnerne som baggrund og placerer dem i hjørnerne af hovedelementet. Det vil sige, at vi handler nøjagtigt som i en af ​​metoderne diskuteret ovenfor.
2. For at slippe af med en-pixel-fejlen (som blev nævnt mere end én gang ovenfor), skal du tilføje en venstre margin (CSS) med en 100% værdi og en negativ offset svarende til -9px til højre hjørneelementer. Generelt, hvis du husker, skal denne forskydning være lig med bredden af ​​hjørneblokken (for os er det 11px), men glem ikke 2px-kanten, som vi har her - vi skal lægge hjørnerne oven på den (11px-2px=9px).

Forresten ville det faktisk være lettere at efterligne pseudo-elementer, som vi gjorde i det forrige eksempel - sådan her udvidelseskode ville være mindre. Men ikke i IE6 ville denne browser have brug for flere "krykker" og som et resultat skulle den skrive to separate betingede kommentarer- for IE6 og IE7, og dette ville kun blæse koden op...

I Firefox fungerer denne metode korrekt fra version 3.6, og i Opera - fra version 10.0 kom jeg ikke med krykker til dem, da dette er af ringe relevans.

Der er mange eksempler og tutorials på internettet til at runde hjørnerne af en blok eller et bord, men som regel er disse tutorials baseret på brugen af ​​billeder eller brugen af ​​yderligere blokke.

I dagens tutorial vil jeg vise dig, hvordan du kan runde bordhjørner med kun CSS.

Direkte markup (Den anden tabel adskiller sig i layoutet af cellerne i øverste linje):

Curabitur en ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Nulla gravida.	Urna augue.	Nunc iaculis bibendum.
		Vestibulum tempor	Laoreet eros semper ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam. eleifend.	Pellentesque kursus, nunc ut facilisis hendrerit

1. Rund hjørnerne direkte ved bordet (bordmærke).

BContentTables( border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overløb: skjult ; margin:0.7em auto;)

2. Fjern enhver baggrund fra den første linje.

Tr.bCTable_Header (baggrund: ingen;)

3. Brug pseudo-class:first-child og kombinatoren > vælg den første celle i tabellen. Afrund det øverste venstre hjørne af den første celle. Baggrunden for den første række består af baggrunden for cellerne i denne række.

Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; ) tr.bCTable_Header td( color:white; font-size:110%; baggrundsfarve:#00843C;)

4. Brug pseudo-class:last-child og kombinatoren > vælg den sidste celle i den første række. Til det runder vi det øverste højre hjørne af.

Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0; )

5. Afrund de nederste hjørner af den sidste linje. Glem ikke at fjerne baggrunden fra den sidste linje; Rækkebaggrunden indstilles af baggrunden for cellerne i den sidste række.

BIndholdstabeller tr:sidste-barn( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; baggrund:ingen; )

6. Derefter analogt med punkt 3-4 in sidste linje runde hjørnerne af den første og sidste celle.

BIndholdstabeller tr:sidste-barn td(baggrundsfarve:#F1F1F2;) .bIndholdstabeller tr:sidste-barn td:første-barn( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;) . bIndholdstabeller tr:sidste-barn td:sidste-barn (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- radius:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0; )

Browser support

Når de fleste programmører hører udtrykket "afrundede hjørner", begynder de at føle sig nervøse. Dette er naturligvis en designbeslutning. Nogle gange ser det ganske anstændigt ud, men når de tegner afrundede hjørner, har mange designere ikke tidligere tænkt over, hvor meget html-koden på siden stiger.

Nu kan programmører slappe af og ikke være nervøse, når det kommer til at lave afrundede hjørner på blokke. I dag vil jeg give et eksempel på at løse dette problem med kun én div ved hjælp af de nye funktioner i CSS3.

Hvis du husker, hvordan de gamle metoder var:

1. Brug af tabeller I værste fald kunne blokken flyttes ikke kun lodret, men også vandret, så fik vi en tabel med 9 celler, for hver af dem blev der sat en baggrund: en afskåret del af det tilsvarende rammeområde. Og det var helt fint, hvis den interne baggrund ikke var gradient, eller der ikke var skygger uden for rammen, hvis sidebaggrunden ikke var ensartet.
2. Ved hjælp af en masse div-blokke. Det samme, når blokken skaleres vandret og lodret, var det nødvendigt at bruge mindst 8 divs indlejret inde i hinanden.
3. Der var også mere eksotiske måder. 🙂

Afrunding af hjørner ved hjælp af CSS3

Endelig har vi mulighed for i høj grad at forenkle denne proces. De fleste anmeldere støtter nu afrundede hjørner, dog med forbehold.

Vi har html-kode på siden:

CSS-koden, der runder vores hjørner, er:

Div.block ( display: blok; margin: 5px; polstring: 0px; kant: 1px fast #989898; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; baggrundsfarve : #FFF; )

Fra koden ovenfor er det kun følgende linjer, der er ansvarlige for afrundingen:

Moz-border-radius: 5px; -webkit-border-radius: 5px; kant-radius: 5px;

Faktisk gav jeg det enkleste eksempel, hvor alle hjørnerne har samme radius. Selvom det er muligt i Firefox browsere og Webkit (Safari, Chrome) konfigurerer forskellige radier for specifikke hjørner eller endda en variabel radius for et hjørne, som altid er Opera og IE foran resten, eller rettere bagefter. Disse funktioner virker ikke i disse browsere. Derfor synes jeg, det er værd at vende tilbage til dette problem, når denne funktion vil fungere fuldt ud overalt.

Godmorgen, eftermiddag, aften eller nat alle sammen. Dmitry Kostin er med dig igen og igen. På en eller anden måde kiggede jeg igennem forskellige billeder og så kunne jeg godt lide nogle af dem. Og de kunne lide dem, fordi de havde afrundede kanter. Det ser umiddelbart mere interessant ud. Synes du det ikke? Og derfor vil jeg i dagens lektion gerne fortælle dig, hvordan du runder hjørner i Photoshop for at få billedet til at se mere interessant ud.

Det, jeg elsker ved Photoshop, er, at det samme i mange tilfælde kan gøres på flere måder. Så det er her. Lad os komme i gang med vores photoshop.

Udglatning ved hjælp af grænser

Denne metode ligner den forrige, men stadig meget anderledes. Vi vil gøre alt med det samme billede.

Ved at skabe en form

Den tredje metode er allerede radikalt forskellig fra de to foregående. Så tag en pause i et par sekunder og kom videre. Jeg vil ikke ændre billedet og vil indlæse denne bil i Photoshop igen.

Kan du se, hvad du endte med? Billedet har afrundede kanter, og alt sammen fordi det kun vises, hvor vores tegnede afrundede rektangel er. Men nu kan du beskære det ekstra billede ved hjælp af rammeværktøjet, eller du kan straks gemme billedet, og du vil allerede have et separat billede med afrundede hjørner.

Prøv at gøre alt selv, og fortæl mig samtidig, hvilken af ​​de præsenterede metoder der er mere at foretrække for dig.

Og forresten, hvis du har huller i Photoshop, eller du bare vil udforske det fuldt ud så hurtigt som muligt, så kan jeg varmt anbefale dig at se en fantastisk photoshop kursus for begyndere. Kurset er gennemarbejdet, alt er fortalt og vist bare godt, og hvert materiale diskuteres meget detaljeret.

Nå, jeg er ved at afslutte min lektion for i dag. Glem ikke at abonnere på nye artikler og dele dette med dine venner. Jeg var glad for at se dig på min blog. Jeg venter på dig igen. Hej hej.

Med venlig hilsen Dmitry Kostin