Kursplan

CSS avancerade lektioner

• CSS-lärobok
• CSS-introduktion
• CSS-basiskonstruktion
• CSS-avancerad konstruktion
• CSS-derivatorval
• CSS-idval
• CSS-klassval
• CSS-skapande
• CSS-bakgrund
• CSS-text
• CSS-teckensnitt
• CSS-lista

CSS rammodell

• Översikt över CSS-fönstermodellen
• CSS-inre marginal
• CSS-kant
• CSS-utkanter
• CSS-kantermarginalkollisjon

CSS positionering

• Översikt över CSS-positionering
• CSS-relativ positionering
• CSS-absolut positionering
• CSS-flytande

CSS väljare

• CSS-elementval
• CSS-valgruppsning
• Detaljerad förklaring av CSS-klassval
• Detaljerad förklaring av CSS-idval
• Detaljerad förklaring av CSS-attributval
• CSS-efterkommande val
• CSS-underordnad elementval
• CSS-nära syskonval

Valfria kurser

Kursrekommendation:

• CodeW3C.coms magiskast

Elementets kant (border) är en eller flera linjer som omger elementets innehåll och inrymdning.

CSS border-attributet tillåter dig att specificera stilen, bredden och färgen på elementets kant.

CSS-kant

I HTML använder vi tabeller för att skapa kant runt text, men genom att använda CSS-kantattribut kan vi skapa utmärkta kanteffekter och tillämpa dem på alla element.

Elementets kant (border) är en eller flera linjer som omger elementets innehåll och inrymdning. Elements kant är en eller flera linjer som omger elementets innehåll och inrymdning.

Varje kant har tre aspekter: bredd, stil och färg. I den här delen kommer vi att i detalj förklara dessa tre aspekter.

Kant och bakgrund

CSS-specifikationen anger att kant dras ovanför elementets bakgrund. Detta är viktigt eftersom vissa kanter är 'avbrutna' (t.ex. punktlinje eller linje kant), och elementets bakgrund bör visas mellan de synliga delarna av kanten.

CSS2 anger att bakgrund endast sträcker sig till inrymdningen, inte till kanten. Senare korrigerades detta i CSS2.1: elementets bakgrund är bakgrunden för innehållet, inrymdningen och kantområdet. De flesta webbläsare följer CSS2.1-definitionen, men vissa äldre webbläsare kan ha olika beteende.

Kantstil

Stil är den viktigaste aspekten av kant, inte bara för att stil kontrollerar visningen av kanten (naturligtvis, stil kontrollerar visningen av kanten), utan också för att utan stil kommer det inte att finnas någon kant.

CSS border-style-attributDefinierade 10 olika icke inherit-stilar, inklusive none.

Till exempel kan du definiera kantstilen för en bild som outset, så att den ser ut som en 'uttågande knapp':

a:link img {border-style: outset;}

Definiera flera stilar

Du kan definiera flera stilar för en kant, till exempel:

p.aside {border-style: solid dotted dashed double;}

Regeln ovan definierar fyra kantstilar för stycken med klassen 'aside': en solid överkant, en punktlinje höger kant, en linje under kant och en dubbel linje vänster kant.

Vi har sett här att värdena följer i ordningen top-right-bottom-left, och denna ordning har också diskuterats när flera värden används för att ställa in olika inrymdningar.

Definiera ensidig stil

Om du vill ställa in stilar för en sida av elementrutan, snarare än för alla fyra sidor, kan du använda följande ensidiga kantstilsattribut:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Därför är dessa två metoder ekvivalenta:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Observera:Om du vill använda det andra sättet måste du placera den enskilda egenskapen efter den korta egenskapen. Eftersom om du lägger till den enskilda egenskapen innan border-style, kommer värdet för den korta egenskapen att överskriva det enskilda värdet none.

Kantens bredd

Du kan använda border-width-attributetSpecificera kantens bredd.

Det finns två sätt att specificera kantens bredd: du kan specificera en längd, till exempel 2px eller 0.1em; eller använda en av de tre nyckelorden, de är thin, medium (standardvärde) och thick.

Anmärkning:CSS definierar inte specifika bredder för de tre nyckelorden, så en användaragent kan sätta thin, medium och thick till 5px, 3px och 2px, medan en annan användaragent sätter dem till 3px, 2px och 1px.

Så kan vi ställa in kantens bredd på detta sätt:

p {border-style: solid; border-width: 5px;}

eller:

p {border-style: solid; border-width: thick;}

Definiera enskild bredd

Du kan ställa in kantens alla sidor i ordningen top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Ovanstående exempel kan också skrivas kortare (denna skrivstil kallasVärdekopiering）：

p {border-style: solid; border-width: 15px 5px;}

Du kan också använda följande egenskaper för att separat ställa in bredden av kantens alla sidor:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Därför är följande regler ekvivalenta med de ovanstående exemplen:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Ingen kant

I de tidigare exemplen har du sett att om du vill visa någon form av kant, måste du sätta kantstilen, till exempel solid eller outset.

Så vad händer om du sätter border-style till none?

p {border-style: none; border-width: 50px;}

Trots att kantens bredd är 50px, är kantstilen satt till none. I detta fall försvinner inte bara kantstilen, utan också bredden sätts till 0. Varför försvinner kantlinjen?

Detta beror på att om kantstilen är none, vilket innebär att kanten inte finns alls, kan kanten inte ha någon bredd, så kantbredden sätts automatiskt till 0, oavsett vad du definierade tidigare.

Det är mycket viktigt att komma ihåg detta. I själva verket är att glömma att deklarera kantstilen en vanlig misstag. Enligt följande regler kommer alla h1-element att ha ingen kant, och inte minst 20 pixlar bred:

h1 {border-width: 20px;}

Eftersom standardvärdet för border-style är none, om ingen stil har deklarerats, är det som att sätta border-style: none.Därför måste du deklarera en kantstil om du vill att kanten ska synas.

Kantfärg

Att ställa in kantfärg är mycket enkelt. CSS använder en enkel border-color-attribut，detta kan ta emot högst 4 färgvärden.

Man kan använda alla typer av färgvärden, till exempel kan det vara namngivna färger, hexadecimala och RGB-värden:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Om färgvärdet är mindre än 4 tecken, börjar värdekopieringen att gälla. Till exempel deklareras regeln nedan för att segmentets övre och nedre kanter är blå, och vänstra och högra kanter är röda:

p {
  border-style: solid;
  border-color: blue red;
  }

Anmärkning:Standardfärgen för kant är elementets egen förgrundsfärg. Om ingen färg har deklarerats för kanten, kommer den att vara densamma som elementets textfärg. Å andra sidan, om elementet inte har någon text, antas det vara en tabell som endast innehåller bilder, då är tabellens kantfärg den textfärg som föräldrelementet har (eftersom color kan ärva). Detta föräldrelement är troligen body, div eller en annan tabell.

Definiera ensidig färg

Det finns också ensidiga kantfärgattribut. Deras princip är densamma som för ensidiga stilar och breddattribut:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

För att specificera en enkel svart kant för h1-elementet och en enkel röd kant för höger kant, kan du specificera det så här:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Transparent kant

Vi har precis talat om att om kanten inte har ett stil, har den ingen bredd. Men i vissa fall kanske du vill skapa en osynlig kant.

CSS2 introducerade färgvärdet transparent för kant. Detta värde används för att skapa en osynlig kant med en viss bredd. Se till exempel nedan:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Vi har definierat följande stil för länkar ovan:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Prova själv

På något sätt fungerar transparent som extra inre marginaler; dessutom har det fördelen att det kan göras synligt när du behöver det. Denna transparenta kant är som en inre marginal eftersom elementets bakgrund sträcker sig till kantområdet (om det finns en synlig bakgrund).

Viktigt:Innan IE7 hade IE/WIN ingen stöd för transparent. I tidigare versioner skulle IE sätta kantfärgen baserat på elementets färgvärde.

CSS-kantegenskaper

Verktygslåda

CSS-referenshandbok

CSS-exempel

CSS-kontroll

CSS-lärord

Sponsrade länkar