前端css3菜单栏点击颜色渐变，方框发光

要实现一个点击时颜色渐变的菜单栏，并且在鼠标点击时给出方框发光的效果，可以使用CSS3的transition属性来实现颜色的渐变效果，使用:active伪类和box-shadow属性来实现点击时的发光效果。

以下是一个简单的实例代码：

HTML:

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">产品服务</a></li>
  <li><a href="#">联系方式</a></li>
</ul>

CSS:

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.menu li {
  display: inline-block;
  margin-right: 10px;
}
 
.menu a {
  text-decoration: none;
  color: #fff;
  padding: 10px 15px;
  background-color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
 
.menu a:hover {
  background-color: #0056b3;
}
 
.menu a:active {
  background-color: #00428c;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

在这个例子中，当鼠标悬停在链接上时，背景色会渐变到深蓝色（#0056b3），而当链接被点击时，背景色会渐变到更深的蓝色（#00428c），并且在链接下方产生一个白色的方框发光效果。这个方框发光效果会在点击后持续一段时间，随后随着鼠标的松开而消失。