0

我有一个导航栏，它比我的背景颜色稍暗。我想要一个从中心到左右两侧的渐变，以便导航栏的最右边和最左边的位达到背景颜色。这可能吗？

<body>
<div id="container">
    <div id="header">
        <h1>
            <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> -->
            <a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a>
        </h1>
        <h2>
            <!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> -->
        </h2>   
    </div>
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="stock.html">Stock</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    <div id="box">
            <a href="#"><img src="home1.jpg" alt="Slideshow Image 1" /></a>

            <a href="#"><img src="home3.jpg" alt="Slideshow Image 2" /></a>

            <a href="#"><img src="home2.jpg" alt="Slideshow Image 3" /></a>
    </div>
    <div id="footer">
        <p class="client">Tel: 0788740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: tjdelane@hotmail.co.uk</p>

    </div>
</div>      
</body>


#nav
{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center; 
  background:rgb(161,153,134)
  background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='(#A19986', endColorstr='#ABA390'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#A19986), to(#ABA390)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 
}
4

1 回答 1

2

是的。CSS 可以做不同程度的跨浏览器成功的渐变（包括线性、径向和颜色停止）。试试这个生成器来构建一些东西： http: //www.colorzilla.com/gradient-editor/

于 2012-07-24T02:32:54.953 回答