前端案例--纯css3实现怪异选项卡

怪异选项卡：实现css自增排序、自制css边框扇形，背景渐变

**涉及知识点：**css伪类、伪元素、自增排序编号、border、border-radius、背景渐变
效果图：

html:

      <div class="tab">
        <a href="#" class="active">主页</a>
        <a href="#">图书查询</a>
        <a href="#">图书添加</a>
        <a href="#">图书删除</a>
        <a href="#">图书修改</a>
     </div>

css:

    * {margin: 0; padding: 0;}
    html, body {min-height: 100%;font-size:14px;font-family:"微软雅黑";padding:20px;}
    h2{
        padding:5px 0;
    }
    .tab{height:36px;background:#666;display:inline-block;
        border-radius:5px;
        box-shadow:0 0 1em rgba(0,0,0,0.5);
         counter-reset:flag;/*重要*/
        overflow:hidden;
    }
    .tab a{
        display:block;
        float:left;
        color:#fff;
        padding:0 10px 0 60px;
        text-decoration:none;
        outline:none;
        line-height:36px;
        font-size:12px;
        position:relative;
        background:linear-gradient(#666,#333);

    }

    .tab a:before{
        content:counter(flag);
        counter-increment:flag;
        /* content: counter(flag);
        counter-increment: flag; */
        position:absolute;
        left:26px;
        width:20px;
        height:20px;
        border-radius:10px;
        background:gray;
        text-align:center;
        line-height:20px;
        margin-top:8px ;
        font-weight:bold;       
    }
    .tab a:after{
        content:'';
        width:36px;height:36px;
        position:absolute;
        right:-18px;top:0px;
        transform:rotate(45deg) scale(0.7);
        z-index:1;
        border-radius:0 5px 0 50px;
        background:linear-gradient(135deg,#666,#333);
        /*只剩边框*/
        border:3px solid #fff;
        border-left:0;border-bottom:0;
        box-sizing:border-box;
    }
    .tab a:hover,.tab a:hover:after{
        background:#ccc;
    }
    .tab a.active,.tab a.active:after{
        background: #111;
    }

属性解释：

• counter-reset：主要功能用来标识计数器作用域，而且此值必须用在选择器上，必且是不能缺少的。共包括两个部分，第一个部分是自定义计数器名称，这一部分是必需的。第二部分是计数器起始值，此值是可选的。默认值为0。此值告诉标识组起始值是什么，所以说这个值非常有价值。因为，如果你设置的值为0，那么计数从1开始；如果你设置的值是-5，那么计数从-4开始。依此类推。
  
  • counter-reset属性可以包含一个或者多个计数器标识符，每个后面都可以跟一个整数值，如section 0 heading 0。如果元素都重置，并且增加一个计数器，计数器是第一次重置，后面值就会递增。如果不止一次指定同一个计算器，则将按指定的计数器做递增。
• counter-increment属性是用来标识计数器与实际相关联元素范围。其第一个值是必需的，获取counter-reset定义的标识符。第二个值是一个可选值，是一个整数值，可以是正整数，也可以是负整数。主要用来预设递增的值，如果取值为负值时，表示递减。默认值为1。
• content和伪类:before、:after或者伪元素::before、::after配合在一起使用，主要功能用来生成内容。counter()是一个函数，其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。可以使用多个counter()，如：
• content: counter(Chapter,upper-roman) "-" counter(section,upper-roman);

css Counters:http://www.w3cplus.com/css3/css-counters.html

三大步骤：
1. 声明计数器:counter-reset:计数器名
2. 创建计数器：counter-increment:计数器名
3. 显示计数器:cotent:counter(计数器名）

干货：

    //制作三角形边框
    .border{
        width:36px;height:36px;
        transform:rotate(45deg);
        border:4px solid red;
        border-left:0;border-bottom:0;
    }
    //制作扇形
    .border-radius{
        width:36px;height:36px;background: red;
        transform:rotate(45deg);
        border-radius:0 5px 0 50px;
    }

拓展：使用选择器在页面中插入内容

    // 插入文字内容：
    h2:before{
        content:'文字';
    }
    //指定个别元素不进行插入
    h2.sample:before{
        content:none;
    }
    //插入图像文件:高效编码
    h2:before{
        content:url(pic.png);
    }
    //将alt属性的值作为图像的标题来显示
    img:after{
        content:attr(alt);
        display:block;
        text-align:center;
        margin-top:5px;
    }
    //指定编号的样式
    h2:before{
        content:'第'counter(mycounter)'章';
    }
    //指定编号的种类:大写字母等
    h2:before{
        content:counter(mycounter,upper0alpha)'.';
    }
    //除此之外，还可以在大编号中嵌套中编号，中编号中嵌套小编号;也可小嵌套中，中嵌套大。