Fast egendom CSS – « gräns", låter dig ställa in tjocklek, färg och typ av perimeterlinjen runt elementet. Parametrarna för den här egenskapen kan skrivas på en rad, separerade med ett mellanslag, och i valfri ordning.

• - linjetjocklek en pixel
• - solid linje
• - Vit färg
• - svart färg
• - grå färg

Solid elementkant

Streckelementkant

Prickad elementkant

Elementkant med dubbel linje

Egendom för enskilda gränssträckor

Pressad räfflad ram i volym

Konvex korrugerad ram i volym

Volumetrisk pressad ram

Volumetrisk konvex ram

Lektioner / CSS /

Lektion 7: CSS Element Border

Nästan varje webbplats använder en egenskap som skapar en kant runt ett element. Det behövs antingen för knappar eller för block med text. För att skapa en kantlinje har ett element två egenskaper i CSS: kant och kontur. Låt oss titta på dem.

gräns

Den här egenskapen behövs för att sätta en ram runt ett element. Den indikerar dess kant i ett webbdokument. Den har 3 betydelser - färg, tjocklek och ramtyp.

Syntaxen för gränsegenskapen är följande:

kant: Bredd Typ Färg;
Du kan välja en annan ordning för att ange egenskapsvärden, men huvudsaken är genom ett mellanslag.

Ramens tjocklek (bredd) måste anges i pixlar (px) eller procent (%).
Färgen kan anges antingen i RGB-format (Red Green Blue) eller i HTML HEX-kod.

Nedan finns TYPER AV LINJER med deras namn:

Hur ställer man in gränser för ett element? Vi gör det enligt följande:

#block (
border:3px solid #0085cc; /* ställ in linjen till 3 pixlar tjock och blå */
}

Om du vill installera en, två, tre ramar på en viss sida, då anger vi det så här:

border-top- ram på toppen;
gräns-botten- bottenram;
gräns-vänster- ram till vänster;
gräns-höger- ram till höger;

Blockera (
kant-höger: 3px fast #0085cc;
border-bottom: 2px streckad #0085cc;
}

Om du vill ta bort ramar element i CSS, skriv sedan i border-egenskapen - ingen

Tom (
gräns: ingen; /* ett element med klassen tom kommer inte att ha en kantlinje */
}

skissera

Outline är en egenskap som behövs för att ställa in den yttre kanten av ett element.

Äta två skillnader från gränsen:
För det första kommer linjen som anges i konturen INTE att påverka själva blockets position, dess bredd och höjd.
För det andra finns det ingen möjlighet att installera en ram på en viss sida.
Syntaxen är densamma som kant.

kontur: 2px prickad #0085cc; /* ram 2 pixlar prickade blå */
För kontur, såväl som för kant, kan du ta bort ramar genom att skriva ingen:

Tack för din uppmärksamhet!

Föregående artikel
Lektion 6.

Elementgränser.

Utfyllnad och marginaler i CSS. Vad är marginal och stoppning? Nästa artikel
Lektion 8. Hur ställer man in textfärg och bakgrund för ett element i CSS?

Kommentarer till artikeln (vk.com)

gräns

Webbläsarstöd

Beskrivning

CSS-egenskapen låter dig ställa in bredd, stil och färg på ett blocks kant samtidigt. En blockkant är en vanlig linje/ram som omger blocket på alla sidor. Det är värt att tänka på att när du lägger till en ram kommer det att påverka blockets totala storlek.

Värdena separeras med ett mellanslag och kan visas i valfri ordning webbläsaren själv avgör vilken som motsvarar den önskade parametern. Det är inte nödvändigt att ange alla tre värden, bredden och/eller färgen kan utelämnas, i vilket fall det värde som är satt för egenskapen som standard kommer att användas istället för det saknade värdet, dvs. om t.ex. bredden inte är specificerad kommer egenskapens standardvärde att användas. Tabellen under syntaxen indikerar värdena för vilka egenskaper som kan användas.

Obs: Om du bara vill ställa in gränser på vissa sidor av ett element, använd följande egenskaper: border-top, border-bottom, border-left, border-right.

Tips: Vanligtvis, när du använder en kant, måste du lägga till utfyllnad.

CSS-egenskap: border

De lägger till vitt utrymme mellan blockramen och dess innehåll: text, bilder eller underordnade taggar. Vanligtvis ritas gränsen nära innehållet i elementet, detta är bara användbart om du behöver sätta en ram runt bilden.

Syntax

border: border-width border-style border-color|herit;

Fastighetsvärden

Exempel

Det finns lite text här.

Resultatet av detta exempel i webbläsarfönstret:

Hur man ställer in färg, stil och storlek på bården i rutor.

I märkningsspråk, border( gräns), har bara tabeller, bilder och ramar, i vissa fall är det möjligt att ställa in färgen på kanten och det är allt.

gränsattribut

Cascading style sheets ger oss fler alternativ, men först till kvarn.

I CSS kan vi kontrollera bredden på gränsen med hjälp av gränsbredd, eller för att vara mer exakt, vi kan kontrollera tjockleken på varje sida separat:
kant-top-bredd- tjockleken på den övre kanten
kant-höger-bredd— högra kantens tjocklek
kant-botten-bredd- tjockleken på den nedre kanten
kant-vänster-bredd— tjockleken på den vänstra kantstenen
Men det kan också finnas en förkortad form:
P(border-width:överst till höger nere till vänster;)(överst till höger nere till vänster).
Kantbredden kan ställas in:
i antal DIV(border-width:5px), från noll till oändligt, dvs. positiv.
tunn— tunn kant, DIV(border-width:tunn)
medium- medium kant, DIV(border-width:medium)
tjock- tjock kant, DIV(border-width:thick)
Siffrorna är tydliga, men med dessa värden beror allt på webbläsaren, men ändå tunn<= medium <= thick .

Vi kan också kontrollera färgen på kanten med hjälp av gräns färg eller för att vara mer exakt, färgen på varje sida:
border-top-färgövre kantfärg;
kant-höger-färg höger kantfärg;
kant-botten-färg nedre kantfärg;
kant-vänster-färg kantfärg på vänster sida.
Färgvärdet ställs in som för Färg, dvs. en av 16 färger: aqua, svart, blå, fuchsia, grå, grön, lime, rödbrun, marin, oliv, lila, röd, silver, kricka, vit eller gul, du kan också ställa in färger: färg: #000000, färg: #AF0 , färg:rgb(255,0,0) eller färg:rgb(100%, 0%, 0%).
Oavsett vilket färgschema du väljer, kommer webbläsare fortfarande att konvertera det till färg:rgb(255,0,0). Till exempel färg: lime = färg:#00ff00 = färg: #0F0 = färg:rgb(0%, 100%, 0%), men för webbläsaren är allt detsamma färg:rgb(0,255,0), dvs. det kommer att beräkna detta värde.

Om tjockleken och färgen på kanten kan styras av HTML, då stilen( border-stil) Endast CSS!!!
Stilen kan styras på varje sida separat:
border-top-stilövre kantstil;
gräns-höger-stil höger kantstil;
kant-botten-stil nedre kantstil;
gräns-vänster-stil vänster sida kantstil.
Låt oss nu titta på stilvärdena:
1)border-style: ingen- Detta är standardvärdet, liknande border-width:0.
2)border-style:hidden– Samma sak, förutom tabeller som vi ska titta på senare.
3)border-style:dotted— En bård gjord av prickar.
4)border-style:streckad— Kant gjord av en prickad linje.
5)border-style:solid— En bård av heldragen linje, d.v.s. som i HTML.
6)border-style:dubbel— En kant av en dubbel heldragen linje, här behöver du en kantbredd på minst 3 pixlar.
7)border-style: groove— Bården ser ut att vara skuren ur duk.
8)border-style:ridge— Bården ser ut att sticka ut ovanför duken.
9)border-style:inset— Hela lådan ser ut som om den har pressats in i duken.
10)border-style:outset– Motsatsen till den tidigare.
Vissa webbläsare kan ignorera värdena: prickad, streckad, dubbel, groove, ridge, inset and outset och visa dem som solida, dvs. en vanlig gräns.

Detta är förstås sant, men alla exemplen ovan är bara principen för funktion, inte mekanismen.
Regel egendom gräns innebär (kant: storlek stil färg;), denna regel är uppfylld om alla tre värden är närvarande och endast i denna sekvens, till exempel H1( kantlinje: 5px dubbelröd;), men det kan finnas undantag om dessa värden tillhandahålls av märkningsspråk, till exempel för en tabell TABELL(kant: 2px), dvs. Endast ett värde anges.

För att hantera inte hela gränsen, utan varje del separat, finns det regler:
(kant-top: storlek stilfärg;)Övre trottoarkantskontroll;
(kant-höger: storlek stilfärg;) Trottoarkantskontroll till höger;
(kant-botten: storlek stilfärg;) Kontroll av nedre kantstenen;
(kant-vänster: storlek stilfärg;) Trottoarstyrning till vänster.
Dessa regler kan användas var för sig eller alla tillsammans.

Undantaget är denna regel:
H1(
kant: 4px fast grön;
}
Saken är den att i CSS har den sista regeln högsta prioritet, i det här fallet innehåller border-egenskapen border-left och därför kommer border-left-regeln att ignoreras, korrekt så här:
H1(
kant: 4px fast grön;
kant-vänster: 2px dubbelröd;
}
Först sätter vi regler för hela gränsen och sedan för enskilda avsnitt.

Jag har allt för gränser för element, förutom att vi tittar på några egenskaper när vi kommer till tabeller och andra undantag.

CSS: gräns. Elementgränser.

CSS3-gränser

CSS3-gränser

Med CSS3 kan du skapa rundade kanter, lägga till skuggor i behållare och använda en bild som en ram – utan att använda ett designprogram som Photoshop.

I den här lektionen kommer du att lära dig om följande egenskaper hos en gräns:

• gräns-radie
• box-skugga
• gränsbild

Webbläsarstöd

Internet Explorer 9 stöder några av de nya gränsegenskaperna.

Firefox kräver prefixet -moz- för border-image.

Chrome och Safari kräver prefixet -webkit- för border-image.

Opera kräver prefixet -o- för kantbild.

Safari kräver också prefixet -webkit- för box-shadow.

Opera stöder nya gränsegenskaper.

CSS3 rundade hörn

Att lägga till rundade hörn i CSS2 var knepigt. Vi var tvungna att använda en annan bild för varje vinkel.

I CSS3 är det enkelt att skapa rundade hörn.

I CSS3 används egenskapen border-radius för att skapa rundade hörn:

Detta block har rundade hörn!

CSS3 Container Shadow

I CSS3 används egenskapen box-shadow för att lägga till en skugga till behållare:

CSS3 Border-Image

Genom egenskapen CSS3 border-image kan du använda en bild för att skapa en kantlinje:

Egenskapen border-image låter dig ange en bildkant!

Originalbilden som används för att skapa gränsen är din:

Nya gränsegenskaper

gränsattribut

gränsattribut, tagg

HTML-gränser

Det är acceptabelt att använda kant utan värden, då blir kanttjockleken lika med en pixel. Som standard visas ramen med 3D-effekter, men om du dessutom använder bakgrundsattributet blir ramen "platt".

Dessutom, om gränsattributet har ett värde som inte är noll, visar webbläsare också tunna ramar runt själva cellerna. Visningen av dessa gränser kan styras med hjälp av attributet regler.

Värderingar

Attributvärdet kan vara vilket icke-negativt tal som helst som anger storleken i pixlar.

Standardvärde: 0.

Syntax

Obligatoriskt attribut: inga.

HTML-exempel: Använder attributet border

Exempelresultat

Resultat. Använder border-attributet.

Ramar har en mängd olika användningsområden, till exempel som ett dekorativt element eller för att separera två föremål. CSS ger otaliga alternativ för att använda gränser.

Ramtjocklek

Gränsens bredd bestäms av egenskapen border-width, som kan ha värdena thin, medium och thick, eller ett numeriskt värde i pixlar. Bilden visar detta system:

Ramfärg

Egenskapen border-color anger färgen på kanten. Värdena är normala färgvärden, till exempel: "#123456", "rgb(123,123,123)" eller "gul" .

Typer av ramar

Det finns olika typer av ramar. De åtta ramtyperna och deras tolkning i Internet Explorer 5.5 visas nedan. Alla exempel visas i "guld" färg och "tjock" tjocklek, men kan givetvis visas i andra färger och tjocklekar.

Värdena ingen eller dolda kan användas om du inte vill visa gränsen.

Exempel på att definiera ramar

De tre egenskaperna som diskuterats ovan kan kombineras i varje element och följaktligen kan olika ramar ställas in. För att illustrera, låt oss ta en titt på dokumentet, som definierar olika ramar för

,

,

Och

Resultatet kanske inte är så imponerande, men det visar några möjligheter:

H1 ( kant-bredd: tjock; kant-stil: prickad; kant-färg: guld; ) h2 ( kant-bredd: 20px; kant-stil: början; kant-färg: röd; ) p ( kant-bredd: 1 px; kant-stil: streckad kant-färg: blå ) ul ( kant-bredd: tunn; kant-stil: solid; kant-färg: orange;)

Du kan också ställa in speciella egenskaper för ramens övre, nedre, högra och vänstra kanter. Så här går det till:

H1 (kant-top-bredd: tjock; kant-top-stil: solid; kant-top-färg: röd; kant-botten-bredd: tjock; kant-botten-stil: solid; kant-botten-färg: blå; kant-höger-bredd: tjock kant-höger-färg: grön kant-vänster-färg;

Kort notation

Som med många andra egenskaper kan du kombinera flera egenskaper till en genom att använda ordkanten. Exempel:

P (kant-bredd: 1px; kant-stil: solid; kant-färg: blå;)

kan kombineras till:

P (kant: 1px fast blå;)

Sammanfattning

I den här handledningen lärde du dig om de obegränsade möjligheterna med CSS när du använder gränser.

I nästa lektion kommer vi att titta på hur man definierar dimensioner i en lådmodell - höjd och bredd.

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

Rama in HTML-element med CSS-egenskaper

1. Border-stil

Som standard ritas ramar alltid ovanpå elementets bakgrund, där bakgrunden 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.

Syntax

P (kant-stil: solid;) p (kant-top-stil: 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 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 det överordnade elementets textfärg. Inte ärvt.

Syntax

P (kantfärg: #cacd58;)

3. Kantbredd

Rambredden 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, är i det här fallet kantbredden 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 ta dess plats.

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

I de fall du behöver ange en annan kantstil för ett element, kan du använda förkortningen för motsvarande kant.
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å;)

Hälsningar till alla läsare av den aktuella publikationen. Idag kommer jag att berätta för dig hur du skapar en dubbel gräns med CSS-verktyg. Du kommer att bli bekant med egenskaper som gränser och konturer och vad de gör.

Efter att ha läst den här artikeln kommer du att utöka din arsenal av kunskap med nya intressanta knep för att skapa skuggor runt gränser och behärska tekniken för att skapa ramar som består av olika färger. Dessutom vill jag beröra ämnet pseudo-element, som avsevärt utökar kapaciteten för layout på webbspråk och CSS. Nåväl, låt oss börja!

Gräns ​​och dess kapacitet

Jag börjar med den välkända gränsfastigheten. Det används ofta i programkod, och i mina tidigare publikationer har jag indirekt berört det mer än en gång. Denna egenskap är universell och mycket flexibel.

Utöver dess standardändamål används kantlinje för att understryka rubriker eller markera viktig textinformation bland allt innehåll, som att separera grammatiska regler med en vertikal linje.

Naturligtvis "leker" varje utvecklare med befintliga delar av webbspråk efter eget gottfinnande, så det kan finnas många användningsfall.

Border ger möjlighet att definiera stil, tjocklek och färg på bårder både för alla sidor samtidigt och för ett specifikt område. För att göra detta, lägg till namnet på sidan med ett bindestreck till ordkanten. Till exempel kant-botten.

Gränsstilen kan vara helt annorlunda:

• streckade
• prickad
• fast
• dubbel
• volymetriska (ränna, utgående, ås, infällda) linjer

Översikt och dess kapacitet

När det gäller kontur är dess syfte identiskt med den tidigare egenskapen, men den används för att definiera den yttre gränsen för ett element. Således, om du ställer in värden för två beskrivna element i stiltabeller samtidigt, kommer gränsen att rama in objektet i en ram, och konturen kommer att placeras runt gränsen.

Och ändå finns det andra skillnader. Således påverkar inte kontur objektets placering bland annat innehåll och ändrar inte dess tjocklek, vilket inte kan sägas om den tidigare egenskapen.

Dessutom har detta CSS-element inte mycket flexibilitet. Värdena som anges av layoutdesignern gäller för alla sidor av den yttre ramen och det kommer inte att vara möjligt att arbeta med endast en sida.

Precis som kantlinje låter den aktuella egenskapen dig ställa in olika stilar för kanter. Dessutom är deras namn desamma som i föregående css-element.

Vad är pseudoelement och vad kan de vara användbara för?

I det här kapitlet vill jag berätta om nytt material. I vissa projekt är det helt enkelt omöjligt att göra utan kunskap om detta ämne.

Så, pseudo-element behövs för att formatera det område av element som det inte finns några väljare eller definitioner för i dokumentträdet.

Förväxla dem inte med pseudoklasser. Dessa formaterar i sin tur befintliga väljare och element.

Moderna regler för att definiera pseudoelement använder ett dubbelt kolon (:efter). Men om du bara använder ":", kommer valideraren att hoppa över koden och inte ge ett fel.

Idag finns det många pseudoelement. Jag har listat de populära i tabellen nedan.

Jag skulle vilja notera en viss egenhet med användningen av de två första pseudoelementen: de samverkar alltid med egenskapen som själva texten är skriven i - innehåll.

Praktisk del

Ovan berättade jag det grundläggande teoretiska materialet och om du läser det fullständigt, kommer du inte att ha några svårigheter med exemplet.

Nedan har jag bifogat koden för programmet där jag, som utlovat, implementerade objekt med en dubbelfärgad ram. Jag lade också till skuggor till några av dem.

Låt mig påminna om att detta kan implementeras med hjälp av en egenskap som t.ex box-skugga. Du kan ange upp till fem värden för den, som kommer att ansvara för den horisontella förskjutningen, den vertikala förskjutningen, oskärpa radie, skuggsträckning och dess färg.

Jag hoppas att denna publikation var användbar för dig. Jag kommer att bli väldigt glad att se dig bland mina prenumeranter. Dela länken till min blogg med dina vänner. Lycka till!

Med respekt, Roman

Beskrivning

Den generiska kantegenskapen låter dig ställa in tjockleken, stilen och färgen på kanten runt ett element samtidigt. Värdena kan vara i valfri ordning, separerade med ett mellanslag webbläsaren själv kommer att avgöra vilken av dem som motsvarar den önskade egenskapen. Om du vill ställa in en ram endast på vissa sidor av ett element använder du egenskaperna för border-top , border-bottom , border-left , border-right.

Syntax

Värderingar

Border-width-värdet bestämmer tjockleken på kanten. Flera gränsvärden tillhandahålls för att kontrollera dess utseende. Deras namn och resultatet av åtgärden presenteras i fig. 1.

Figur 1. Ramstilar

border-color anger färgen på kanten, värdet kan vara i vilket format som helst som tillåts av CSS.

ärver ärver värdet av föräldern.

HTML5 CSS2.1 IE Cr Op Sa Fx

Det här exemplet lägger till en dubbel ram runt lagret. Resultatet visas i fig. 2.

Ris. 2. Tillämpa gränsegenskapen

Objektmodell

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

Webbläsare

Webbläsaren Internet Explorer upp till version 6 inklusive visar streckade med en kanttjocklek på 1 px. Med en tjocklek på 2px och högre fungerar det prickade värdet korrekt. Denna bugg är åtgärdad i IE7, men endast för alla 1px-kanter. Om en av blockkanterna har en tjocklek på 2px eller högre, blir i IE7 det prickade värdet till streckat .

Internet Explorer-versioner upp till och inklusive 7.0 stöder inte ärvningsvärdet.

Kantstilen kan variera något mellan webbläsare när du använder groove , ridge , inset , eller outset värden.