CSS
Gräns

Syntax

• gräns

• border: border-bredden border-style border-color | initial | ärva;

• kant-topp: kant-bredd kant-stil kant-färg | initial | ärva;

• border-bottom: border-bredden border-style border-color | initial | ärva;

• kant-vänster: kant-bredd kant-stil kant-färg | initial | ärva;

• kant-höger: kant-bredd gräns-stil kant-färg | initial | ärva;

• border-style

• kantstil: 1-4 ingen | dold | prickade | streckad | fast | dubbel | spår | åsen | inlägg | början | initial | ärva;

• border-radius

• gränsradie: 1-4 längd | % / 1-4 längd | % | initial | ärva;

• gräns-övre-vänstra-radie: längd | % [längd | %] | initial | ärva;

• gräns-övre högra-radie: längd | % [längd | %] | initial | ärva;

• gräns-nedre-vänstra-radie: längd | % [längd | %] | initial | ärva;

• gräns-längst ner till höger-radie: längd | % [längd | %] | initial | ärva;

• border-image

• border-image: border-image-source border-image-slice [border-image-wide [border-image-outset]] border-image-repetera

• border-image-source: none | bild;

• border-image-slice: 1-4 nummer | procent [fyll]

• border-image-repetera: 1-2 stretch | upprepa | runda | Plats

• border-kollaps

• gräns-kollaps: separat | kollaps | initial | ärva

Anmärkningar

border-radius

Egenskapen gränstradius låter dig ändra formen på basboxmodellen.

Varje hörn i ett element kan ha upp till två värden för den vertikala och horisontella radien för det hörnet (för högst 8 värden).

Den första uppsättningen värden definierar den horisontella radien. Den valfria andra uppsättningen av värden, föregiven av en '/', definierar den vertikala radien. Om bara en uppsättning värden tillhandahålls används den för både den vertikala och horisontella radien.

border-radius: 10px 5% / 20px 25em 30px 35em;

10px är den horisontella radien för uppe till vänster och nere till höger. Och 5% är den horisontella radien för höger-och-längst upp till vänster. De andra fyra värdena efter '/' är de vertikala radierna för uppe till vänster, uppe till höger, nere till höger och nere till vänster.

Som med många CSS-egenskaper, kan korthanter användas för alla eller alla möjliga värden. Du kan därför ange allt från ett till åtta värden. Följande korthållning gör att du kan ställa in den horisontella och vertikala radien för varje hörn till samma värde:

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Gränseradien används oftast för att konvertera rutaelement till cirklar. Genom att sätta gränseradien till hälften av längden på ett kvadratiskt element skapas ett cirkulärt element:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Eftersom gränseradien accepterar procentsatser är det vanligt att använda 50% för att undvika att manuellt beräkna gränstradiusvärdet:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Om bredd- och höjdegenskaperna inte är lika kommer den resulterande formen att vara en oval snarare än en cirkel.

Exempel på webbläsarspecifik gränstradius:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

border-style

Den border-style egendom sätter stilen av ett element gräns. Den här egenskapen kan ha från ett till fyra värden (för varje sida av elementet ett värde.)

Exempel:

border-style: dotted;

border-style: dotted solid double dashed;

border-style kan också ha värdena none och hidden . De har samma effekt, förutom hidden verk för lösning av gränskonflikter för <table> -element. I en <table> med flera gränser har none den lägsta prioriteten (vilket betyder i en konflikt, gränsen skulle visa), och hidden har den högsta prioriteten (vilket betyder i en konflikt, gränsen skulle inte visas).

gräns (korthår)

I de flesta fall vill du definiera flera gränseegenskaper ( border-width , border-style och border-color ) för alla sidor av ett element.

Istället för att skriva:

border-width: 1px;
border-style: solid;
border-color: #000;

Du kan helt enkelt skriva:

border: 1px solid #000;

Dessa korthår finns också för alla sidor av ett element: border-top , border-left , border-right och border-bottom . Så du kan göra:

border-top: 2px double #aaaaaa;

border-image

Med border-image fastigheten har du möjlighet att ställa in en bild som ska användas i stället för normala gränsen stilar.

En border-image består i huvudsak av en

• border-image-source : Sökvägen till den bild som ska användas
• border-image-slice : Anger förskjutningen som används för att dela upp bilden i nio regioner (fyra hörn , fyra kanter och en mitt )
• border-image-repeat : Anger hur bilderna för sidorna och mitten av kantbilden skalas

Tänk på följande exempel wheras border.png är en bild på 90x90 pixlar:

border-image: url("border.png") 30 stretch;

Bilden kommer att delas upp i nio regioner med 30x30 pixlar. Kanterna kommer att användas som hörnen på gränsen medan sidan kommer att användas däremellan. Om elementet är högre / bredare än 30px kommer denna del av bilden att sträckas ut . Den mellersta delen av bilden är standard som transparent.

border- [vänster | höger | topp | botten]

border-[left|right|top|bottom] används för att lägga till en gräns till en specifik sida av ett element.

Om du till exempel vill lägga till en gräns till vänster om ett element kan du göra:

#element {
    border-left: 1px solid black;
}

border-kollaps

Egenskapen border-collapse gäller endast för table (och element som visas som display: table eller inline-table ) och anger om tabellgränserna kollapsas till en enda ram eller tas bort som i standard HTML.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Se även tabeller - dokumentation i gränsen kollaps

Flera gränser

Använd disposition:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Med box-skugga:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Använda ett pseudoelement:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Skapa en flerfärgad kant med hjälp av kantbild

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

html

<div class='bordered'>Border on all sides</div>

Ovanstående exempel skulle producera en kant som består av 5 olika färger. Färgerna definieras genom en linear-gradient (du kan hitta mer information om lutningar i dokumenten ). Du kan hitta mer information om egenskapen border-image-slice i border-image på samma sida.

( Obs: Ytterligare egenskaper lades till elementet för presentationsändamål. )

Du hade lagt märke till att den vänstra gränsen bara har en enda färg (gradens startfärg) medan den högra gränsen bara har en enda färg (gradientens slutfärg). Detta beror på hur gränsen bildegenskap fungerar. Det är som om lutningen appliceras på hela rutan och sedan maskeras färgerna från polstring och innehållsområden, vilket gör att det ser ut som om bara gränsen har lutningen.

Vilka gränser som har en enda färg beror på lutningsdefinitionen. Om lutningen är en to right lutning, skulle den vänstra gränsen vara startfärgen på lutningen och den högra gränsen skulle vara slutfärgen. Om det var en to bottom gradient skulle den övre gränsen vara gradientens startfärg och den undre kanten skulle vara slutfärgen. Nedan visas utgången från en to bottom 5 färgad gradient.

Önskas gränsen bara på vissa sidor av elementet då border-width egenskap kan användas precis som med alla andra normala gränsen. Om du till exempel lägger till koden nedan skapas en gräns endast på toppen av elementet.

border-width: 5px 0px 0px 0px;

Observera att alla element som har border-image inte respekterar border-radius (det vill säga gränsen kommer inte att kurva). Detta är baserat på nedanstående uttalande i specifikationen:

Bakgrunden till en ruta, men inte dess gränsbild, klipps till lämplig kurva (som bestäms av 'bakgrundsklipp').