Podemos aplicar efectos de degradado al fondo de la caja de los elementos mediante el valor  webkit-linear-gradient para la propiedad background.

 

Ejemplo 

Ejemplo

Añadimos al fondo de cada item background: linear-gradient(#09F, #006)

 
Código CSS
  1. /*Colocar los elementos en línea*/
  2. nav li {
  3. display: inline;
  4. margin:20px;
  5. }

  6. /*Aplicar estilo a los enlaces*/
  7. nav li a {
  8. font-family: Arial;
  9. font-size:11px;
  10. text-decoration: none;
  11. padding: 10px;
  12. background-color: #2175bc;
  13. color: #fff;
  14. -webkit-border-radius: 14px 4px 14px 4px;
  15. border-radius: 14px 4px 14px 4px;
    background: linear-gradient(#09F, #006)
  16. }
  17.  

  18. /*Crear efecto al pasar el ratón*/
  19. li a:hover {
  20. background-color: #2586d7;
  21. margin-top:-2px;
  22. padding-bottom:12px;
  23. }

 

Código HTML y Resultado
<nav>
<ul>
	<li><a href="#">Lenguajes de Marcas</a></li>
	<li><a href="#">Bases de Datos</a></li>
	<li><a href="#">Redes Locales</a></li>
	<li><a href="#">Sistemas Operativos</a></li>
</ul>
</nav>

 

 

 

Saber más​ Para saber más

 Puedes ver todas las propiedades y atributos referente a degradados haciendo clic en: 

  1. http://www.w3schools.com/svg/svg_grad_linear.asp