XHTMLforum - box-shadow top&buttom

Hallo!

Nein, direkt über "box-shadow" wirst du das wohl nicht hinbekommen.
Da CSS3 bei dir aber erlaubt zu sein scheint, könnte man das per "gradient" hintricksen.

Body:

HTML-Code:

<div id="test">

    <ul>

        <li><span><a href="#">test1</a></span></li>

        <li><span><a href="#">test2</a></span></li>

        <li><span><a href="#">test3</a></span></li>

        <li><span><a href="#">test4</a></span></li>

        <li><span><a href="#">test5</a></span></li>

    </ul>

</div>

CSS:

HTML-Code:

    *{

        margin: 0;

        padding: 0;

    }

    #test{

        margin: 20px;

    }

    #test ul{

        list-style: none;

    }

    #test ul li{

        float: left;

    }

    #test ul li span{

        display: block;

        margin-right: 5px;

        padding: 10px 0;

    }

    #test ul li span a{

        display: block;

        background: #f00;

        padding: 10px;

    }

    #test ul li span:hover{

        background: -moz-linear-gradient(top, #fff 0%, #000 20%, #000 80%, #fff 100%);

    }

Getestet im FF12.
Probier's mal aus, ob es deinen Vorstellungen entspricht.

PS: Persönlich würde ich das über background-images lösen, dann bist du auch bei älteren Browsern auf der sicheren Seite.