Question

我有一个导航栏，它的背景颜色略深一些。我希望从中心到右侧和左侧都有一个渐变，这样导航栏的最右边和最左边的位就会达到背景颜色。这可能吗？

<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+ */ 
}

Answer 1

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

将导航栏颜色混合到背景颜色（渐变？）

1 个答案: