Nya CSS3 gränstekniker - dummies

Borders har varit en del av CSS från början, men CSS3 lägger till några riktigt spännande nya alternativ. Moderna webbläsare stöder nu gränser gjorda av en bild samt avrundade hörn och boxskuggor. Dessa tekniker lovar att lägga till spännande nya möjligheter till dina mönster.

Bildgränser

Med CSS3 kan du använda en bild för en elementgräns. Mekanismen är ganska kraftfull eftersom den upptäcker kanterna på en bild och "skivar" den för att skapa kanterna och hörnen av gränsen från kanterna och hörnen av bilden.

Rambilden lagras som ram. png i samma katalog som HTML-filen. Den har ett öppet centrum. Använd följande kod för att lägga till en bildgräns runt alla element på sidan:

h2 {border-width: 15px; border-image: url ("frame. png") 25% upprepning; -webkit-border-image: url ("frame. png") 25% upprepning; -moz-border-image: url ("frame. png") 25% upprepa;}

Så här lägger du till en gräns bild:

Köp din bild.

Bilden ska redan vara utformad som en slags kant. Typiskt kommer det att vara en form runt kanterna, med antingen ett solidfärgscenter eller ett transparent centrum.
Ange gränsvidd.

Du måste ange gränserna direkt. Gränsen på rambilden är skalad för att passa vilken storlek du vill ha.
Beräkna hur mycket av bildens gräns du vill ha.

Om du lämnar bort procenttecknet beräknas värdet i pixlar. Du kan lägga till fyra värden om du föredrar att använda olika mängder av originalbilden för varje gräns.
Ange vilket beteende du vill ha.

Originalbilden är nästan aldrig lika stor som det element du vill omge, så du kan ge ett tips för att förklara hur webbläsaren ska hantera element som är större än originalet. De vanligaste valen är att upprepa (upprepa originalbilden) eller sträcka (för att ta upp hela utrymmet). Med en enkel bild som rammen. png som används i detta exempel kommer resultaten att vara desamma.

Hur man lägger till rundade hörn

Äldre CSS var känt för att vara mycket rektangulär, så webbdesigners försökte mjuka sina mönster genom att lägga rundade hörn. Detta var en svår effekt att uppnå. CSS3 förenklar i hög grad skapandet av avrundade hörn med gränslinjen.

Det är ganska lätt att få rundade hörn på de webbläsare som stöder taggen:

hörn. html h1 {bredd: 60%; bakgrundsfärg: # 000066; färg: # 9999ff; gräns: # 9999ff 3px spår; marginal: auto; text-align: center; gränsen:. 5em;}

Round Corners Demo

Regeln fungerar genom att klippa en båge från varje hörn av elementet.Bågen har den angivna radieen, så för skarpa hörn behöver du en liten radie. Du kan mäta radie i någon av de vanliga mätningarna, men pixlar (px) och teckenbredd (em) är de vanligaste.

Gränsen är inte synlig om inte elementet har bakgrundsfärgen eller gränsen definierad. Observera att det finns variationer av varje tagg för att stödja specifika hörn. Detta kan vara användbart om du inte vill tillämpa samma radie på alla fyra hörnen av ditt element. De senaste webbläsarna stöder nu den generiska gränslinjestyran.

Du kan hämta ett antal av tidigare generations webbläsare med hjälp av det leverantörsspecifika prefixet. Om din webbläsare inte förstår gränslinjestyran skapar den helt enkelt de vanliga kvadratiska hörnen.

Hur man lägger till en boxskugga

Boxskuggor läggs ofta till element för att skapa djupets illusion.

Boxskuggseffekten är inte svår att uppnå, men det görs normalt som en del av en klassdefinition så att den kan återanvändas på hela sidan. Här är några exempelkod:

boxShadow. html. skugga {box-shadow: 10px 10px 10px # 000000; höjd: 200px; bredd: 200px; vaddering: 1em; gräns: 1px solid svart; gränsstråle: 5px; bakgrundsfärg: #EEEEEE;}

Box Shadow Demo
Den här rutan har en skugga

Lägga till en boxskugga är mycket lättare i CSS3 än den en gång var. Här är stegen:

Definiera en klass.

Ofta vill du tillämpa samma inställningar på ett antal element på en sida, så boxskuggan kombineras ofta med andra element som bakgrundsfärg och gräns i en CSS-klass som kan återanvändas på hela sidan.
Lägg till boxskuggregeln.

De senaste webbläsarna stöder standardboksskuggregeln, men du kan också vilja inkludera webbläsarens prefix för att rymma äldre browses.
Ange förskjutningen.

En skugga är vanligtvis kompenserad för rektangeln den tillhör. De två första värdena indikerar horisontell och vertikal förskjutning. Mätning med någon av de vanliga CSS-mätningarna (normalt pixlar eller ems).
Bestäm oskärpa och spridningsavstånd.

Du kan ytterligare ändra skuggans beteende genom att ange hur snabbt skuggan försvinner och hur långt den sprider sig. Dessa är valfria parametrar.
Ange skuggfärgen.

Du kan göra skuggan någon färg du önskar. Svart och grått är vanliga, men du kan få intressanta effekter genom att välja andra färger.

Många andra skuggeffekter är möjliga. Du kan lägga till flera skuggor, och du kan också använda inläggsordet för att skapa en inre skugga så att den ser ut som en del av sidan är utklippt.