Sådan opretter du en skygge for en webtabel

Tilføjelse af en skygge til et bord på din webside kan give det lidt mere pop. Med CSS3 "box-shadow" -egenskaben kan du tilføje en tilpassbar skygge til ethvert bokseelement uden at skulle bruge billeder. Box-shadow-ejendommen fungerer i alle større browsere, der understøtter CSS3. Når du tilføjer en bokseskygge til bordet, vil den skabe en skygge under hele bordet. Skyggen gælder ikke for individuelle rækker eller celler i tabellen.

Tilføj CSS3 box-shadow elementet til din tabel. Hvis du bruger et ID eller en klasse til dit bord, kan du tilføje boksskyggeelementet direkte til det. Hvis du kun har et bord på din side, eller hvis du vil have, at hver tabel har samme stil, kan du inkludere en "tabel" definition i dit stylesheet. For eksempel:

bord {bredde: 50%; box-skygge: 1px 1px 1px #CCCCCC; }

Hvis du ikke har nogen anden CSS styling anvendt på dit bord, er den enkleste metode at bruge attributten "stil" inden for taggen som følger:

Indstil skyggens vandrette og lodrette position med de to første værdier af elementet. Disse er de eneste to nødvendige elementer. Du kan eventuelt tilføje en tredje værdi for at indstille skyggenes sløring og en fjerde for skyggenes størrelse. Du kan også tilføje en valgfri farve til din skygge. Alt i alt vil din mest komplekse skygge se noget ud som dette:

bord {box-shadow: 2px 2px 4px 4px # 8CCCC8; }

Gem din side og se den i din webbrowser for at se skyggen. Skygger kan være finicky; ændring af størrelsen med en pixel eller ændring af farven på skyggen kan være forskellen mellem en subtil forbedring og en osteagtig effekt.