导航分割线

最新推荐文章于 2024-11-20 02:15:00 发布

转载最新推荐文章于 2024-11-20 02:15:00 发布 · 635 阅读

htmlcss 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用CSS背景渐变属性创建导航菜单分隔线的方法，通过给每个<li>元素添加特定的背景色实现视觉上的分隔效果，并详细解释了如何去除首尾分隔线，以及各参数的具体含义。

.nav li{
    position:relative;
    display:inline-block;
    padding:0 16px;
    font-size: 13px;
    text-shadow:1px 2px 4px rgba(0,0,0,.5);
    list-style: none outside none;
  }

1.制作导航分隔线

.nav li{background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;}

2.删除第一个和最后一个导航分隔线

.nav li:last-child{background:none;}

/删除最后一个/

原理：使用背景颜色background渐变分别给每个li右侧添加宽1px、高15px（如果该数值>li的高度，则超出部分隐藏）的背景色，看起来就是分隔线的效果
补充：no-repeat right / 1px 15px; 这几个参数的意义：
　　1：right为背景色起始绘制位置，也就是从右边开始；
　　2:1px为背景色绘制宽；
　　3:15px为背景色绘制高度；
在这里插入图片描述