Hur man ansluter streckad kant med CSS

Dekorerade gränser kan pryda något element på sidan, men CSS-gränserna är begränsade när det gäller stil. Utvecklare kommer ofta med lösningar som CSS-gradientgränser, SVG-gränser, flera gränser och mer för att efterlikna och uppgradera utseendet på boxgränser och dess animeringar.

Idag ser vi på en enklare hack för streckade gränser: streckad gränsanimering. Den animerade streckade gränsen kommer att skapas med enbart översikt och box-shadow, lämnar inget krångel om fallbacks, sedan översikt stöds från IE8 och framåt. På så sätt kan användaren fortfarande se gränserna till skillnad från när SVG eller gradient används. Med det här kan du också skapa tvåfärgade bindestreck. Låt oss ta en titt.

Skapa gränserna

Vi ska först skapa gränserna. Därför använder vi en streckad kontur och en rutaskugga.

 .banners disposition: 6px streckad gul; boxskugga: 0 0 0 6px # EA3556; ... 

De översikt kommer att behöva alla dess värden bredd, typ och färg. De box-shadow behöver bara värdet för spridning vilket borde vara detsamma som konturens bredd och färg. Både konturen och boxskuggan tillsammans kommer att skapa effekten av tvåfärgade bindestreck.

Du kan sedan justera lådans bredd eller höjd för önskad kantlinje i hörnen.

Animera gränserna

För vårt första animationsexempel lägger vi CSS-keyframe-animationer till en uppsättning banners med gränserna som animerar kontinuerligt och får uppmärksamhet. För animeringseffekten byter vi enkelt ut färgerna i rutan och boxskuggan.

@keyframes animateBorder to outline-color: # EA3556; boxskugga: 0 0 0 6px gul; 

Du kan rikta in konturens färg med hjälp av skissera-färg longhand egendom, men för box skugga måste du ge alla värden till shorthandegenskapen för nu.

När animationen är klar lägg den till i rutan.

.banners disposition: 6px streckad gul; boxskugga: 0 0 0 6px # EA3556; animering: 1s animateBorder oändlig; ...

Övergångar på gränserna

För övergångsexemplet lägger vi gränser till bilder och animerar dem på svävaren. Du kan också ändra gränsstorleken för olika effekter.

.foton outline: 20px dashed # 006DB5; boxskugga: 0px 0px 0px 20px # 3CFDD3; övergång: alla 1s; ... .foton: svep konturfärg: # 3CFDD3; boxskugga: 0 0 0 20px # 006DB5; 

Nu svänger du över dessa bilder för att se dina CSS-punkterade gränser i all sin animerade ära.

Och det är en omslag. Du kan försöka ersätta streckade gränser med prickade, men effekten kanske inte lika bra. Du kan också ändra konturtypen under animering för några fler effekter.