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

在设计菜单栏时，常会想要菜单栏边框发光，可以在css中设计如下样式：

border: 1px solid rgba(0, 213, 255, 0.4); /* 设置边框宽度和颜色为白色 */  

  box-shadow: 0 0 6px rgba(0, 213, 255, 0.5); /* 散发阴影与高度相同 */

通过设计盒子的阴影，就可以使边框发光显示。

如果要设计菜单栏点击时出现颜色渐变，并且字体会有一个颜色渐变过渡，可以这样改css样式：

.menu-item {  

  color: #000; /* 默认字体颜色 */  

  transition: color 0.3s; /* 字体颜色变化的过渡效果 */  

}  

.menu-item.active { /* 添加激活状态的类名 */  

  color: #fff; /* 点击时的字体颜色 */  

}  

.menu-item.active::before { /* 添加激活状态的类名 */  

  content: "";  

  position: absolute;  

  top: 0;  

  left: 0;  

  right: 0;

  height: 50px; /* 与菜单项的高度相同 */  

  background: linear-gradient(to bottom, rgba(78, 109, 171, 0.6) 10%, rgba(255, 255, 255,0.5) 100%); /* 从深颜色渐变到透明 */  

  z-index: -1; /* 将渐变层放置在菜单项的下方 */  

}

这样就可以实现菜单栏颜色的渐变。

以下附上一个例子的完整代码：

<template>  
<div>
  <nav>  
    <ul class="menu">  
  <li  
    v-for="(menuItem, menuIndex) in menuItems"  
    :key="menuIndex"  
    @click="toggleSubMenu(menuIndex)"  
    class="menu-item"  
    :class="{ active: activeMenuItem === menuIndex }"  
  >  
    {{ menuItem.label }}  
  </li>  
</ul>
  </nav>  
</div>
</template>  
<script>  
export default {  
  data() {  
    return {  
      showMenu: true, // 控制菜单的显示状态 
      menuItems: [  
        { label: '菜单1'},  
        { label: '菜单2'},
        { label: '菜单3' }, 
      ],  
      activeMenuItem: null, // 当前激活的菜单项索引  
      activeSubMenu: null,   

    };  
  },  
  methods: {  
    toggleMenu() {  
      this.showMenu = !this.showMenu; // 切换菜单的显示状态  
    },   
    toggleSubMenu(menuIndex) {  
      this.activeMenuItem = menuIndex; // 设置当前激活的菜单项索引  
      this.activeSubMenu = this.activeSubMenu === menuIndex ? null : menuIndex;  
    },  
  },  
};  
</script>
<style scoped>  
.menu {  
  width: 600px;  
  height: 50px;  
  display: flex;  
  list-style-type: none;  
  padding: 0;  
  border: 2px solid white;  
  margin: auto;  
  text-align: center;  
  position: relative;  
}  
  
.menu-item {  
  color: #000; /* 默认字体颜色 */  
  transition: color 0.3s; /* 字体颜色变化的过渡效果 */  
}  
  
.menu-item.active { /* 添加激活状态的类名 */  
  color: #fff; /* 点击时的字体颜色 */  
}  
  
.menu-item.active::before { /* 添加激活状态的类名 */  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;
  height: 50px; /* 与菜单项的高度相同 */  
  background: linear-gradient(to bottom, rgba(78, 109, 171, 0.6) 10%, rgba(255, 255, 255,0.5) 100%); /* 从深颜色渐变到透明 */  
  z-index: -1; /* 将渐变层放置在菜单项的下方 */  
}  
.menu-item {  
  width: 100px;
  justify-content: center; 
  position: relative;  
  cursor: pointer;  
  text-align: center;   
  line-height: 50px; 
  margin-left: 15px;
  border: 1px solid rgba(0, 213, 255, 0.4); /* 设置边框宽度和颜色为白色 */  
  box-shadow: 0 0 6px rgba(0, 213, 255, 0.5); /* 散发阴影与高度相同 */ 
}  
</style>

运行的结果截图：

通过以上步骤就可以实现点击菜单栏颜色渐变，边框发光了。