Fast egendom CSS-gräns Det fungerar för att skapa gränsen för ett objekt, nämligen tjockleken på ramen, dess färg och stil. Den här egenskapen används ofta i HTML. Du kan skapa olika effekter för bättre uppfattning om innehållet på sidan. Designa till exempel en sidofält, webbsida, meny, etc.

1. CSS-kantsyntax

gräns: kant-bredd kant-stil kantfärg | ärva;

• border-width - kanttjocklek. Du kan ställa in den i pixlar (px) eller använda standardvärdena thin, medium, thick (de skiljer sig bara i bredd i pixlar)
• border-style - stil för den visade kanten. Kan ta följande värden
  • ingen eller dold - tar bort gränsen
  • prickig - prickad ram
  • streckad - ram gjord av streck
  • solid - enkel linje (används oftast)
  • dubbel - dubbel ram
  • skåra - räfflad 3D-kant
  • ridge, inset, outset - olika 3D-rameffekter
  • ärva - värdet på det överordnade elementet tillämpas
• border-color - kantfärg. Kan ställas in med hjälp av specifikt namn färger eller RGB-format(se namn på html-färger för webbplatsen)

Notera

Värdena i CSS-gränsegenskapen kan ställas in i valfri ordning. Den vanligaste sekvensen är "tjockleksstilsfärg".

2. Exempel med olika CSS-gränser

2.1. Exempel. Olika kantdesignstilar kantstil

border-style: streckad

border-style: streckad

border-stil: solid

border-stil: dubbel

kant-stil: spår

kantstil: ås

border-style: infälld

border-style:outset

Fyra olika ramar

kant-stil: prickig

border-style: streckad

border-stil: solid

border-stil: dubbel

kant-stil: spår

kantstil: ås

border-style: infälld

border-style:outset

Fyra olika ramar

2.2. Exempel. Ändra ramfärg på musen

Det här exemplet är väldigt enkelt men intressant. Den visar hur du kan använda pseudoklassen :hover och CSS-ram gräns att skapa enkla effekter(till exempel för en meny).

När du för musen över ett block ändras ramfärgen

Så här ser det ut på sidan:

2.3. Exempel. Hur man gör en transparent kantram

Ramen kan göras genomskinlig. Denna effekt är sällsynt, men kan ibland vara mycket användbar för webbdesigners. För att ställa in transparens måste du använda färguppsättningen i formen RGBA (R, G, B, P), där den sista parametern ställer in transparensen ( riktigt nummer från 0,0 till 1,0)

Så här ser det ut på sidan:

3. Border thickness: kant-bredd-egenskap

Ställer in linjetjockleken. Tidigare specificerade vi det i en enda beskrivning av gränsen.

CSS kant-bredd syntax

gränsbredd: tunn | medium | tjock | menande;

• tunn - tunn linjetjocklek
• medium - genomsnittlig linjetjocklek
• tjock - tjock linjetjocklek

Nedan följer några exempel. Det mest ovanliga kommer att vara den olika tjockleken på bården på varje sida.

kant-bredd: tunn

kant-bredd: medium

kant-bredd: tjock

Olika tjocklekar vid kanterna

Så här ser det ut på sidan:

kant-bredd: tunn

kant-bredd: medium

kantbredd: tjock

Olika tjocklekar vid kanterna

4. Hur man gör en kantram på endast en kant (kant)

CSS-gränsegenskapen har härledda egenskaper för att ställa in ensidiga gränser på ett element:

• border-top - för att ställa in gränsen längst upp (överkant)
• border-bottom - för att sätta en kant längst ner (nedre kanten)
• border-right - för att sätta gränsen till höger (höger kant)
• border-left - för att ställa in gränsen till vänster (vänster kant)

Dessa gränser kan kombineras, d.v.s. Skriv din egen ram för varje riktning. Syntaxen är exakt densamma som kant.

Det finns även fastigheter

• border-top-color - ställer in färgen på den övre kanten
• border-top-style - ställer in stilen för den övre kanten
• border-top-width - ställ in tjockleken på den övre kanten
• etc. för varje riktning

Enligt min åsikt är det lättare att skriva allt på en rad än att skapa extra text i stilar. Till exempel kommer följande egenskaper att vara desamma

/* Beskrivning av två identiska stilar: */

4.1. Exempel. Vacker ram för att markera citat

Exempel på citatram

Så här ser det ut på sidan:

Exempel på citatram

Notera
Du kan ställa in en separat ram för varje sida.

5. Hur man lägger till flera gränser till ett HTML-element

Ibland behöver du göra flera bårder. Låt oss ge ett exempel

5.1. Första alternativet med flera kanter

Så här ser det ut på sidan:

Det finns en andra väg genom skuggning.

5.2. Överlägg skuggor för att skapa flera kanter

Så här ser det ut på sidan:

6. Runda hörn vid kanterna (kantradie)

För att skapa vackra ramar använd egenskapen CSS border-radius (endast tillgänglig i CSS3). Den kan användas för att skapa rundade hörn, vilket skapar ett helt annat utseende. Till exempel

7. CSS indragen rad

Nedtryckta linjer kan se imponerande ut mot en mörk bakgrund, vilket inte är lämpligt för varje webbplats.

---

Så här ser det ut på sidan:

För att komma åt border från JavaScript måste du skriva följande konstruktion:

document.getElementById("elementID").style.border="VALUE"

3,5 av 5

Tror du det är möjligt med ett par taggar och ren CSS göra en skalbar triangel? Vad sägs om femhörningen? Men en sådan stjärna? Jag tror att många tycker inte. Egentligen är det möjligt.

Så idag har vi ett efterexperiment. Vi kommer att spela med alla kända CSS-egenskap- gräns (och allt som har med den att göra). Under experimentet kommer vi att titta på hur man gör några enkla polygoner, en stjärna och titta på ett fall där dessa tekniker kan användas i praktiken. Gå!

Enkla geometriska former

Så låt oss börja med enkla exempel. Vet du hur man ritar en triangel? använder HTML och CSS? Och så här:

HTML

CSS

.trapezoid ( vertikal-justera: text-bottom; )

Trapets,
.polygon (visa: -moz-inline-block;)

Polygon,
.trapezoid ( marginal:0; utfyllnad: 0; bakgrund: ingen; )

Polygon ( bredd: 10 em; höjd: 10 em; kant: ingen; display: inline-block; text-align: center; )
.trapezoid (
display: inline-block; bredd: 1px; höjd: 0; marginal: 0 auto;
kant-vänster: 5em solid transparent; border-right: 5em solid transparent;
}

Polygon .aa (kant-botten: 10 em solid; kant-top: ingen;)

Polygon.r2 (höjd: 0em; )

Polygon.r3 (höjd: 8,66em; )
.polygon.r3 .trapezoid (kantbredd: 8,66 em 5em; )

div.eg ( bredd: 10em; bakgrund: #FFF; marginal: 0 0; utfyllnad: 1 em; )
div.eg .polygon ( display: block; margin: 0 auto; )

R3 (färg: röd; teckenstorlek: 0,5 em; )

Stjärna

HTML

Stjärna

CSS

#stjärna(
bredd: 15em;
höjd: 14,27 em;
position: relativ;
}

#stjärnspann,
#stjärna(
display: block;
}

#topp(
bredd: 0;
höjd: 0;
marginal: auto;
kant-höger: 4,64 em solid transparent;
kant-vänster: 4,64 em solid transparent;
kant-botten: 14,27 em solid;
}

#Centrum(
bredd: 5,7 em;
kant-höger: 4,65 em solid transparent;
kant-vänster: 4,65 em solid transparent;
border-top: 3,36em solid;
höjd: 0;
position: absolut;
topp: 5,46em;
vänster: 0;
z-index: 100;
text-align: center;
}

#botten(
position: absolut;
botten: 0;
vänster: 2.852em;
kant-höger: 4,635 em solid transparent;
kant-vänster: 4,635 em solid transparent;
border-bottom: 3,4em solid #fff;
bredd: 0;
höjd: 0;
}

#centerspan(
margin-top: -2em;
färg: #000;
font-weight: fet;
}

a#stjärna:hover #centerspan(
färg: #fff;
bakgrundsfärg: transparent;
}

en stjärna(
färg: #f90;
bakgrundsfärg: transparent;
}
a#stjärna:hover(
färg: #fc3;
bakgrundsfärg: transparent;
}

Några fler exempel

• Julgran och ovanlig layout av Eric Meyer;
• Kakel och menyer från teknokratins chefsteknolog;

Naturligtvis kan du skapa skönhet i Photoshop, men vad händer om du behöver spara texten och inte klistra in den med en vacker bild?

Till exempel, för bättre indexering, ville jag göra titeltexten i taggarna

. Men samtidigt behålla skönheten. Så här:

Så låt oss göra lite text med en skugga med CSS:

Nivå 3 CSS har egenskapen "text-shadow" för att lägga till en skugga till varje bokstav i vilken text som helst.

1. Enklaste formen: h3 (text-skugga: 0.1em 0.1em #333)
2. Suddiga textskuggor: h3.b (text-skugga: 0.1em 0.1em 0.2em svart)
3. Läsbar vit text: h3.a (färg: vit; text-skugga: svart 0.1em 0.1em 0.2em)
4. Layered Shadows: h3 (text-skugga: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006)
5. Rita bokstäver och konturer: h3 (text-skugga: -1px 0 svart, 0 1px svart, 1px 0 svart, 0 -1px svart)
6. Neon Glow: h3.a (text-skugga: 0 0 0.2em #8F7) h3.b (text-skugga: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (text-skugga: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F)

Ett annat intressant exempel:

Dispositionstext med CSS

Stryk text med använder CSS Det är möjligt att göra detta utan att tillgripa skript. Denna effekt kan skapas med egenskapen text-shadow. Även om IE inte accepterar denna egenskap i någon av dess versioner - i de andra populära webbläsare Receptet som beskrivs kommer att fungera utmärkt.

Tänk på koden nedan:

Exempel nr 1

H1(text-skugga: röd 1px 0px, röd 1px 1px, röd 0px 1px, röd -1px 1px, röd -1px 0px, röd -1px -1px, röd 0px -1px, röd 1px -1px;)

Den första parametern i egenskapen text-shadow anger färgen på skuggan, den andra den horisontella förskjutningen av skuggan i förhållande till texten, den tredje den vertikala förskjutningen. När du anger en skuggförskjutning i alla riktningar runt texten med 1 pixel i tur och ordning får du streckeffekten.

Stroke exempel nr 1

För att göra strecket mer mättat kan du använda den fjärde parametern text-shadow, som är ansvarig för skuggans oskärpa radie:

Exempel nr 2

H1(text-skugga: röd 1px 0px, röd 1px 1px, röd 0px 1px, röd -1px 1px, röd -1px 0px, röd -1px -1px, röd 0px -1px, röd 1px -1px, röd 0 0 3px 0 0 3px, röd 0 0 3px, röd 0 0 3px, röd 0 0 3px, röd 0 0 3px, röd 0 0 3px, röd 0 0 3px;)

Stroke exempel nr 2

Om du märker det upprepas egenskapen "red 0 0 3px" flera gånger. Det är här mättnadseffekten ligger. För att få ett tydligare utseende av slaget kan egenskapen läggas till med andra parametrar Ett stort antal en gång. Den enda nackdelen är att den kan bromsa ner webbläsaren kraftigt på svagare datorer.

CSS-gräns Ett element är en eller flera linjer som omger elementets innehåll och dess utfyllnad. Gränsen anges med egenskapen stenografi border. Ramstilen ställs in med hjälp av tre egenskaper: stil, Färg Och bredd.

Dekorera ramar och kanter av HTML-element med CSS-egenskaper

1. Border-stil

Som standard ritas kanter alltid ovanpå elementets bakgrund, med bakgrunden som sträcker sig till elementets ytterkant. Ramstilen avgör dess visning utan denna egenskap, ramar kommer inte att synas alls. För ett element kan du ställa in en kantlinje för alla sidor samtidigt genom att använda 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}	Listar fyra olika stilar för ett elements kant på en gång, bara för egenskapen kantstil: (kantstil: fast prickad ingen prickad;)
första
ärva

Syntax

P (border-style: solid;) p (border-top-style: solid;)

2. Ramfärg kantfärg

Egenskapen ställer in färgen på ramarna på alla sidor samtidigt. Med hjälp av de förtydligande egenskaperna kan du ställa in en annan färg för kanten på varje sida av elementet. Om ingen färg är angiven för ramen blir den samma som färgen på elementets text. Om elementet inte har någon text kommer kantfärgen att vara densamma som det överordnade elementets textfärg. 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. Samtidigt förblir ramens bredd. Kan användas för att ändra kantfärgen när du håller musen över ett element för att undvika att elementet förskjuts.
Färg	Färgen på ramarna ställs in med värdena för egenskapen. (kantfärg: #cacd58;)
{1,4}	Samtidig överföring av fyra 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 standardvärdet.
ärva	Ärver egenskapsvärdet från det överordnade elementet.

Syntax

P (kantfärg: #cacd58;)

3. Kantbredd

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

Syntax

P (kantbredd: 2px;)

4. Ställa in en ram 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 värde inte anges kommer standardvärdet att ersätta det.

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

Om det är nödvändigt att ställa in annan stil gränser för ett element, kan du använda förkortningen för motsvarande gräns.
Egenskaperna nedan kombinerar följande egenskaper till en enda deklaration: border-width , border-style och border-color . Listan över egenskaper anges i en given ordning, medan ett eller två värden kan hoppas över, i vilket fall deras värden kommer att anta standardvärdena.

Stilen för den övre kanten ställs in med egenskapen border-top, bottom-border-bottom, left-border-left och höger-kant-höger.

Syntax

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

6. Extern konturkontur

Egenskapen anger en yttre ram runt element (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 konturen visas ovanpå elementets box, vilket i sin tur kan resultera i att elementets yttre stoppning och intilliggande områden överlappar varandra.

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

Den yttre konturen är alltid rektangulär och följer inte gränsen för det block för vilket kantradie är specificerad.

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

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

6.1. konturstil

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

Syntax

P (konturstil: ås;)

6.2. Ytterkonturfärg konturfärg

Färgen på den yttre konturen kan endast anges när satt värde konturstil. Inte ärvt.

Syntax

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

6.3. Ytterkonturtjocklek konturbredd

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

Syntax

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

Hälsningar kära läsare. Idag ska jag berätta och visa hur du kan skapa en textkontur i CSS. Vi kommer att utföra alla manipulationer uteslutande med egenskapen text-shadow.

Tunn, skarp kontur

Som en text som vi kommer att testa alla våra idéer på, föreslår jag att använda detta:

Här kan du se att blocket med text har klassen text-dec. Det är genom detta som vi kommer åt vårt element i css och applicerar de nödvändiga egenskaperna på det. Så, hur man gör ett tunt slag:

Text-dec( font-size: 50px; färg: gul; text-shadow: 1px 1px 0 black, -1px -1px 0 black )

Låt oss fråga direkt stor storlek typsnitt så att allt syns väldigt tydligt, och textfärgen är till exempel gul. Den tredje raden i vårt fall implementerar just det strecket.

Egenskapen text-shadow låter dig lägga till en skugga till texten, du kan lägga till så många skuggor som du vill, separerade med kommatecken. Egenskapssyntaxen är:

Text-skugga: horisontell offset | vertikal | oskärpa | Färg

I vårt fall satte vi först en liten offset ner och till vänster, och sedan upp och till höger. Som ett resultat har texten skisserats längs hela konturen. Om du lägger till en oskärpa på 10 pixlar till varje skugga kommer det att se ut så här:

Suddigt slag

Ett annat tillvägagångssätt är att inte specificera en förskjutning alls, utan definiera en oskärpa – då kommer texten också att vara kontur, men inte tydligt. Låt oss lägga till samma exakta text till html, men ställ bara in en annan stilklass - text-dec2:

Text-dec2( font-size: 50px; färg: blå; text-shadow: 0 0 7px red;)

Det ser ut så här:

Djärvt slag

Detta är svårare att implementera, eftersom att flytta skuggorna för mycket kan göra texten oläslig. Och ändå kan en viss effekt uppnås, även om du för detta måste lägga till mycket mer skuggor än i tidigare fall. Lägg därför till html nytt textfragment med klasserna text-dec3 och text-dec4 . Och här är stilarna för dem:

Text-dec3( teckensnittsstorlek: 50px; färg: gul; text-skugga: 1px 1px 0 svart, -1px -1px 0 svart, 2px 2px 0 svart, -2px -2px 0 svart, 3px 3px 0 svart, -3px - 3px 0 svart, 4px 4px 0 svart, -4px -4px 0 svart ).text-dec4( font-size: 50px; färg: gul; text-shadow: -1px 1px 0 svart, 1px -1px 0 svart, -2px 2px 0 svart, 2px -2px 0 svart, -3px 3px 0 svart, 3px -3px 0 svart, -4px 4px 0 svart, 4px -4px 0 svart)

Som ni ser behöll texten läsbarheten och fick samtidigt en hyfsad svart kontur. Kärnan i detta tillvägagångssätt är att vi gradvis lägger till nya skuggor och ökar förskjutningen med 1 pixel varje gång.

Ännu tjockare slag på alla sidor

Vidare - svårare. Jag visste personligen inte hur man korrekt implementerade ett slag på alla sidor, men sedan stötte jag på en text-skugggenerator på Internet, som låter dig anpassa skuggan i visuellt läge, och sedan behöver du bara kopiera dess kod . Här är en länk till generatorn.
Med dess hjälp kunde jag göra en skugga så här:

Jag kommer inte att ge koden, den tar upp så många som 50 rader, men leta själv i generatorn.

CSS är inte allsmäktig än

På den här css-funktioner slutar. Om du vill ha ett fint djärvt slag som det här:
Gör det sedan i Photoshop, och själva texten måste infogas på webbsidan som en bild

Hittills känner jag till alternativ som hur man gör en textkontur i CSS. Kanske känner du några, skriv i kommentarerna. Nästa gång ska jag visa dig några fler effekter du kan göra med text med hjälp av egenskapen text-shadow.