Divi lockiga ramar i html. CSS-stoppning och gränser

CSS-ram ett element är en eller flera linjer som omger elementets innehåll och utfyllnad. Gränsen ställs in med den korta egenskapsgränsen. Ramstilen ställs in med tre egenskaper: stil, Färg och bredd.

Styling av gränser och gränser för HTML-element med CSS-egenskaper

1. Border-stil

Som standard ritas kanter alltid ovanpå elementets bakgrund, bakgrunden sträcker sig till elementets ytterkant. Ramens stil avgör dess visning, utan denna egenskap kommer ramarna inte att synas alls. För ett element kan du ställa in en kantlinje för alla sidor samtidigt med egenskapen border-style, eller för varje sida separat med hjälp av border-top-style kvalificerande egenskaper, etc. Inte ärvt.

border-stil (border-top-style, border-right-style, border-bottom-style, border-left-style)
Värden:
ingen	Standardvärdet betyder ingen ram. Tar också bort gränsen för ett element från en grupp av element med ett inställt värde av denna fastighet.
dold	Motsvarar ingen.
prickad	prickad
streckade	streckade
fast	fast
dubbel	dubbel
räffla	räffla
bergsrygg	bergsrygg
infälld	infälld
början	början
{1,4}	Samtidigt räknar upp fyra olika stilar för elementets gränser, endast för egenskapen gränssnitt: (kantstil: fast prickad ingen prickad;)
första
ärva

Syntax

P (kant-stil: solid;) p (kant-top-stil: solid;)

2. Kantfärg kantfärg

Egenskapen anger färgen på kanterna på alla sidor samtidigt. Med hjälp av att förtydliga egenskaper kan du ställa in en anpassad färg för kanten på varje sida av elementet. Om ingen färg har angetts för gränsen kommer den att vara samma som färgen på elementets text. Om elementet inte har någon text kommer kantfärgen att vara densamma som textfärgen för det överordnade elementet. Inte ärvt.

gräns färg (kant-topp-färg, kant-höger-färg, kant-botten-färg, kant-vänster-färg)
Värden:
transparent	Installerar transparent färg för ramen. I det här fallet förblir ramens bredd. Kan användas för att ändra färgen på kanten när du håller musen över ett element för att undvika att flytta elementet.
Färg	Färgen på ramarna ställs in med hjälp av egenskapsvärden. (kantfärg: # cacd58;)
{1,4}	Listar fyra samtidigt olika färger för elementkanter, endast för egenskapen border-color: (kantfärg: # cacd58 # 5faf8a # b9cea5 # aab238;)
första	Ställer in egenskapsvärdet till dess standardvärde.
ärva	Ärver egenskapsvärdet från det överordnade elementet.

Syntax

P (kantfärg: # cacd58;)

3. Bårdens bredd

Ramens bredd anges med längdenheter eller nyckelord... Om egenskapen border-style är inställd på none och elementets kant är inställd på en viss bredd, I detta fall kantbredden är noll. Inte ärvt.

Syntax

P (kantbredd: 2px;)

4. Ställa in ramen med en egenskap

Border-egenskapen låter dig kombinera följande egenskaper: border-width, border-style, border-color, till exempel:

Div (bredd: 100px; höjd: 100px; kant: 2px fast grå;)

I det här fallet kommer de angivna egenskaperna att tillämpas på alla gränser för elementet samtidigt. Om något av värdena inte är specificerat kommer standardvärdet att ta dess plats.

5. Ställa in en kantlinje för en kant av ett element

I fallet när det är nödvändigt att ställa in annan stil elementgränser, kan du använda förkortningen för motsvarande kantlinje.
Följande egenskaper kombinerar följande egenskaper till en enda deklaration: kant-bredd, kant-stil och kant-färg. Listan över egenskaper specificeras i angiven ordning, medan ett eller två värden kan utelämnas, i vilket fall deras värden kommer att ta sina standardvärden.

Stilen på den övre kanten ställs in med egenskapen border-top, den nedre är kant-botten, den vänstra är kant-vänster och den högra är kant-höger.

Syntax

P (kant-top: 2px fast grå;)

6. Yttre kontur

Egenskapen sätter den yttre gränsen runt elementen (dvs utanför den normala gränsen). Huvudsyftet med den här egenskapen är att markera ett element. Till skillnad från border-egenskapen påverkar tillämpningen av denna egenskap inte storleken eller positionen för elementet, eftersom det är det. konturen dras över elementlådan, vilket i sin tur kan göra att elementets yttre stoppning och intilliggande områden överlappar varandra.

Dessutom omger den yttre konturen, till skillnad från elementets kant, elementet från alla sidor och ramar in det helt.

Den yttre konturen är alltid rektangulär, den följer inte kanterna på den låda som gränsradien är inställd för.

Egenskapen outline låter dig kombinera följande egenskaper: outline-color, outline-style, outline-width. Om något av värdena inte är specificerat kommer standardvärdet att ta dess plats.

Div (bredd: 100px; höjd: 100px; kontur: # cacd58 solid 2px;)

6.1. Konturstil konturstil

Utseendet på den yttre konturlinjen ställs in på samma sätt som med elementets kantstil. Inte ärvt.

Syntax

P (konturstil: ås;)

6.2. Konturfärg konturfärg

Den yttre konturfärgen kan endast tilldelas när satt värde konturstil. Inte ärvt.

Syntax

P (konturstil: ås; konturfärg: silver;)

6.3. Konturtjocklek konturbredd

Tjockleken på den yttre konturlinjen ställs in på samma sätt som tjockleken på elementramen. Inte ärvt.

Syntax

P (konturstil: prickad; konturbredd: 5px;)

CSS3 ram utökar formateringsmöjligheterna för elementgränser med egenskaper som tillåter runda hörn element och även användning Bilder att dekorera kanterna på ett element.

Rundade hörn och tavelramar

1. Runda hörn med kantradie

Webbläsarstöd

IE: 9.0
Firefox: 4.0
Krom: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android webbläsare: 4.1
Krom för Android: 44

Egenskapen gör att hörnen på inline- och blockelement kan rundas. Kurvan för varje hörn definieras med en eller två radier som definierar dess form - cirkel eller ellips... Radien sträcker sig till hela bakgrunden, även om elementet inte har några kanter, bestäms den exakta positionen för sekanten med hjälp av egenskapen background-clip.

Border-radius-egenskapen låter dig runda alla hörn samtidigt och med hjälp av border-top-left-radie, border-top-right-radius, border-bottom-right-radie, border-bottom-left-radie fastigheter du kan runda varje hörn separat ...

Om du ställer in två värden för egenskapen border-radius, kommer det första värdet att avrundas övre vänstra och nedre högra hörnet och den andra är överst till höger och nedre vänstra.

Värden som ges genom/bestämmer horisontell och vertikala radier... Fastigheten går inte i arv.

Varianter

Div (bredd: 100px; höjd: 100px; kant: 5px fast;) .r1 (kantradie: 0 0 20px 20px;) .r2 (kantradie: 0 10px 20px;) .r3 (kantradie: 200pxpx;) ;) .r4 (kantradie: 10px / 20px;) .r5 (kantradie: 5px 10px 15px 30px / 30px 15px 10px 5px;) .r6 (kantradie: 10px 30px;x 7px 20p.) kant-radie: 50%;) .r8 (kant-top: ingen; kant-botten: ingen; kant-radie: 30px / 90px;) .r9 (kant-nedre-vänster-radie: 100px;) .r10 (kant -radie: 0 100%;) .r11 (kantradie: 0 50% 50% 50%;) .r12 (kant-översta-vänster-radie: 100% 20px; kant-nedre-höger-radie: 100% 20px ;)
Ris. 1. Exempel olika alternativ rundar blockets hörn

2. Border-image

Webbläsarstöd

IE: 11.0
Firefox: 15,0, 3,5 -moz-
Krom: 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 webbläsare: 4.4, 4.1 -webkit-
Chrome för Android: 42

Egenskapen låter dig ställa in bilden som elementets kant. Huvudkravet för bilden är att den ska vara symmetrisk. Egenskapen innehåller följande värden: (border-image: width source segment repeat start;).

Med detta enkel bild du kan få en sådan ram för ett element.

/ * Exempel 1 * / div (width: 260px; höjd: 100px; border-style: solid; border-image-width: 15px; border-image-source: url (border_round.png); border-image-slice: 30 ; border-image-repeat: stretch;) / * Exempel 2 * / div (bredd: 260px; höjd: 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. Ett exempel på att dekorera kanterna på ett block med hjälp av en bild

Skivorna A - B - C - D bildar kantens hörn, och delen av bilden mellan dem fyller det återstående utrymmet på kanten enligt det angivna värdet för egenskapen kant-bild-upprepning. Storleken på hörnet (i det här exemplet siffran 30) ställs in med värdet för egenskapen border-image-slice.

2.1. Kant-bild-bredd

Egenskapen ställer in bildens bredd för elementets kant. Om ingen bredd har angetts är den standard till 1.

kant-bild-bredd
Värden:
längd	Ställer in bredden på kanten i längdenheter - px / em. Du kan ställa in från ett till fyra värden samtidigt. Om ett värde anges, är bredden på alla sidor av ramen densamma, två värden anger bredden på den övre och nedre delen och höger-vänster, etc.
siffra	Det numeriska värdet som gränsbreddsvärdet multipliceras med.
%	Bredden på elementets kant beräknas i förhållande till bildens storlek. Horisontell i förhållande till bredd, vertikal - i förhållande till höjd.
bil	Motsvarar kant-bild-skiva.
första
ärva

Syntax

Div (kantbildsbredd: 30px;) Fig. 3. Ett exempel på inställning av bredden på bildramen med olika typer värden

2.2. Border-image-source resurs

Egenskapen anger sökvägen till bilden som kommer att användas för att dekorera blockets kanter.

Syntax

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

2.3. Border-image-slice-element

Egenskapen bestämmer storleken på de delar av bilden som används för att dekorera elementets kanter och delar upp bilden i nio delar: fyra hörn, fyra kanter mellan hörnen och en mittdel.

Värden:
siffra	Storleken på ramdelarna kan ställas in med ett, två, tre eller fyra värden. Ett värde sätter gränserna till samma storlek för varje sida av elementet. Två värden: det första bestämmer storleken på de övre och nedre gränserna, det andra - höger och vänster. Tre värden: det första bestämmer storleken på den övre gränsen, det andra - höger och vänster, och det tredje - nedre gränsen. Fyra värden: Bestämmer storleken på den övre, högra, nedre och vänstra kanten. Det numeriska värdet representerar antalet px.
%	Kantstorlekar beräknas i förhållande till bildens storlek. Horisontell i förhållande till bredd, vertikal - i förhållande till höjd.
fylla	Värdet anges tillsammans med ett tal eller en procentsats. Om det anges beskärs bilden inte med ramens inre kant, utan fyller också området inuti ramen.
första	Ställer in den här egenskapen till dess standardvärde.
ärva	Ärver värdet på den här egenskapen från sin överordnade.

Syntax

Div (kant-bild-slice: 50 20;)
Ris. 4. Ett exempel på att ställa in skivor av en bildram

2.4. Border-image-repeat

Egenskapen styr fyllningen av utrymmet mellan ramens hörn av bakgrundsbilden. Det kan ställas in med ett enda värde eller med ett par värden.

Syntax

Div (kant-bild-upprepning: upprepa;) Fig. 5. Ett exempel på upprepning av den centrala delen av bildramen med olika typer av värden

2.5. Offset border-image-outset

Egenskapen låter dig flytta rambilden utanför elementets gränser med den angivna längden. Kan ställas in med antingen ett eller fyra värden.

Syntax

Div (kant-bild-start: 10px;)
Ris. 6. Ett exempel på förskjutning av bildramen med olika typer av värden

3. Offset av den yttre ramens konturförskjutning

Egenskapen anger avståndet mellan gränsen gränselement och en yttre kant skapad med konturegenskapen.

/ * Figur 1: * / img (kant: 1px fast rosa; kontur: 1px streckad grå; konturförskjutning: 3px;) / * Figur 2: * / img (kantbredd: 1px 10px; kantstil: fast; kantfärg: rosa; kontur: 1px streckad grå; konturförskjutning: 3px;) / * Figur 3: * / img (kant: 3px infälld rosa; kontur: 1px streckad grå; konturförskjutning: 1px;)
Ris. 7. Ett exempel på bilddekoration med en yttre ram

4. Gradientram

Border-image-värdet kan inte bara vara en bild utan också en gradientfyllning.

Genomskinlig ram

Transparent är en av färgerna. På detta sätt kan du ställa in gränser för alla sidor av ett element samtidigt eller separat för varje sida. Gränsens bredd styrs av egenskapen gränsbredd.

* (boxstorlek: border-box;) .wrap (höjd: 200px; stoppning: 25px; bakgrund: # 00E4F6;) .gradient (höjd: 150px; bredd: 50%; marginal: 0 auto; kant: 10px solid transparent ; border-image: linjär-gradient (till höger, transparent 0%, # ADF2F7 100%); border-image-slice: 1;)

Postkuvert

* (boxstorlek: border-box;) .wrap (höjd: 200px; stoppning: 25px;) .gradient (höjd: 150px; bredd: 50%; marginal: 0 auto; kant: 10px solid transparent; kantbild: 10 repeterande linjär-gradient (45 grader, # A7CECC, # A7CECC 10px, transparent 10px, transparent 20px, # F8463F 20px, # F8463F 30px, transparent 30px, transparent 40px);)

Vlad Merzhevich

MED använder CSS Du kan lägga till en ram till ett element på flera sätt. I grund och botten används naturligtvis gränsegenskapen som den mest universella, såväl som kontur och, överraskande, box-skugga, vars huvuduppgift är att skapa en skugga. Därefter kommer vi att överväga dessa metoder och deras skillnader sinsemellan.

Disposition egendom

Den enklaste egenskapen för att skapa ramar. Har samma parametrar som border, men skiljer sig avsevärt från den i vissa detaljer:

• kontur ritas runt elementet (kanten är inuti);
• kontur påverkar inte elementets dimensioner (kanten läggs till elementets bredd och höjd);
• kontur kan endast ställas in runt hela elementet, inte på enskilda sidor (kanten kan användas på vilken sida som helst eller alla samtidigt);
• konturen påverkas inte av den avrundningsradie som anges av med gränsradiefastigheten(agerar på gränsen).

Frågan uppstår - i vilka fall behövs disposition, när dess roll, trots de uppräknade skillnaderna, helt övertas av gränsen? Det finns inte så många situationer, men de förekommer:

• skapande av komplexa flerfärgade ramar;
• lägga till en ram till ett element när du håller muspekaren över det med muspekaren;
• dölja ramen som läggs till av webbläsaren automatiskt för vissa element när de får fokus;
• för en kontur kan du ställa in avståndet från kanten på ett element till ramen med hjälp av egenskapen outline-offset för att skapa.

Flerfärgade ramar

Det bör förstås att kontur inte på något sätt ersätter gräns och kan mycket väl existera med den, som visas i exempel 1.

Exempel 1. Skapa en ram

I det här exemplet läggs en svart ram runt elementet, som skiljs från bakgrunden med en vit ram (Fig. 1).

Ris. 1. Rama runt elementet

Ram vid användning: sväva

Att lägga till en kant genom kant ökar bredden på elementet, vilket är ganska märkbart när man kombinerar kant och pseudoklassen: hover. Det finns två sätt att "vinna" detta. Det enklaste är att ersätta kant med kontur, som vi vet inte har någon effekt på elementets dimensioner (exempel 2).

Exempel 2. Border on hover

kontur är inte alltid lämplig, om så bara för att hörnavrundning inte påverkar den. Här är den andra metoden lämplig - lägg till en osynlig ram eller ram som matchar bakgrundsfärgen och ändra sedan dess parametrar vid hovring (exempel 3). Då kommer ingen förskjutning av elementet att ske, eftersom ramen redan finns från början. Men kom alltid ihåg att elementets bredd är summan av värdena för bredd, kant till vänster och kant till höger. Situationen är liknande med höjden.

Exempel 3. Ram vid hovring

Kant runt formulärfält

I vissa webbläsare (Chrome, Safari, senaste Operaversioner) en liten färg ram(fig. 2). För att ta bort det, lägg bara till värdet none till outline-egenskapen i stilar, som visas i exempel 4.

Ris. 2. Rama in runt fälten

Exempel 4. Ta bort ramen

Ramar via box-skugga

Även om egenskapen box-shadow är avsedd att lägga till en skugga runt ett element, kan den också användas för att skapa kanter som inte kan göras med en ram eller kontur. Detta beror på det faktum att antalet skuggor kan vara obegränsat, vars parametrar är listade separerade med kommatecken.

För att få ramen bör de tre första parametrarna ställas in på noll, de är ansvariga för skuggans position och dess oskärpa. Den fjärde parametern i detta fall är ansvarig för kanttjockleken, och den femte anger kantfärgen. För den andra ramen är den fjärde parametern summan av tjockleken på de två ramarna.

Exempel 4 visar hur man lägger till två kanter och en kant till höger med en box-shadow-egenskap.

Exempel 4. Använda box-shadow

Resultat detta exempel visas i fig. 3.

Ris. 3. Ramar skapade av egenskapen box-shadow

En av de roliga tillämpningarna av egenskapen CSS3 box-shadow är att skapa en dubbel ram runt ett element. En mycket intressant effekt för siddekoration, men det fungerar bara i nyare versioner av webbläsare som stöder box-shadow.

Det finns dock flera andra metoder för att skapa denna effekt. Dessutom den uppenbara användningen bakgrundsbildär långt ifrån idealiskt.

Denna handledning introducerar fem metoder för att skapa en dubbel ram runt ett element. Och bara en av dem kräver en bild, och alla andra använder ren CSS-kod med utmärkt stöd i webbläsare.

Metod 1: kant och kontur

Denna metod fungerar bara i webbläsare som stöder outline-egenskapen (alla utom IE6/7). Du lägger till både kant- och konturegenskaper till elementet.

En (kant: fast 6px #fff; kontur: fast 6px #888;)

Anledningen till att denna metod fungerar är att konturramen alltid ritar på utsidan av rektangeln. Problemet med outline-egenskapen uppstår när flytande element används, eftersom gränsen överlappar intilliggande element.

Metod 2: pseudoelement

Denna metod kräver absolut positionering ramverk:

Två (kant: fast 6px #fff; position: relativ; z-index: 1;) .two: före (innehåll: ""; display: block; position: absolut; topp: -12px; vänster: -12px; kant: solid 6px # 888; bredd: 312px; stoppning-botten: 12px; min-höjd: 100 %; z-index: 10;)

Nyckelpunkterna är att ställa in z-index-egenskapen (så att pseudoelementet överlappar innehållet), positionering och min-höjdvärdet. Den senare egenskapen bevarar ramens elasticitet.

Metod 3: skugga

Mest bästa metoden eftersom det bara tar en rad kod med box-shadow-egenskapsinställningarna.

Tre (box-skugga: 0 0 0 6px #fff, 0 0 0 12px # 888;)

Två skuggor används för att skapa en dubbel kant. De är åtskilda med kommatecken. Oskärpan är inställd på 0. Eftersom den andra skuggan överlappar den första har den dubbelt så stor bredd. Nyckelögonblick- användningen av ogenomskinliga färger, vilket skapar en tydlig gräns mellan ramarna.

Liksom outline-egenskapen påverkar box-shadow inte intilliggande element och kan överlappa dem. Därför måste du ställa in fältet för formationen utseende kompositioner.

Naturligtvis är stödet för box-shadow-egenskapen begränsat till nyare webbläsare.

Metod 4: det extra div-elementet

V den här metoden Använd av yttre element