Miten luoda varjo Web-taulukolle

Varjostuksen lisääminen Web-sivun taulukkoon voi antaa sille hieman enemmän popia. CSS3 "box-shadow" -ominaisuuden avulla voit lisätä muokattavan varjon mihin tahansa laatikkoon ilman, että tarvitset kuvia. Box-shadow -ominaisuus toimii kaikissa tärkeimmissä selaimissa, jotka tukevat CSS3: ta. Kun lisäät laatikkovärin pöydälle, se luo varjon koko taulukon alle. Varjo ei koske yksittäisiä rivejä tai soluja taulukon sisällä.

1.

Lisää CSS3-ruutu-varjo-elementti taulukkoon. Jos käytät taulukkosi tunnusta tai luokkaa, voit lisätä ruudun varjon elementin suoraan siihen. Jos sinulla on vain yksi taulukko sivulla tai jos haluat, että jokaisella taulukolla on sama tyyli, voit sisällyttää taulukkosi määritelmän tyylitaulukkoon. Esimerkiksi:

taulukko {leveys: 50%; laatikko-varjo: 1px 1px 1px #CCCCCC; }

Jos taulukossa ei ole muuta CSS-tyyliä, yksinkertaisin tapa on käyttää tunnisteessa olevaa "tyyli" -määritettä seuraavasti:

2.

Aseta varjon vaaka- ja pystyasento elementin kahdella ensimmäisellä arvolla. Nämä ovat vain kaksi vaadittua elementtiä. Valinnaisesti voit lisätä kolmannen arvon varjojen hämärtymisen asettamiseksi ja neljännen varjon koon. Voit myös lisätä varjostasi valinnaisen värin. Kaiken kaikkiaan kaikkein monimutkaisin varjoisi näyttää tältä:

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

3.

Tallenna sivu ja näytä se Web-selaimessasi nähdäksesi varjon. Varjot voivat olla hienoja; Koko muuttaminen pikselillä tai varjon värin muuttaminen voi olla hienovaraisen lisäyksen ja juustovaikutuksen välinen ero.

Kärki

  • Varjoja voidaan soveltaa myös taulukon soluihin ja riveihin.

Varoitus

  • Box-shadow -ominaisuus ei toimi Internet Explorer 8: n versioiden ja alempien versioiden kanssa. Näissä selaimissa pöytä yksinkertaisesti tekee ilman varjoa.
 

Jätä Kommentti