前端案例--纯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)'.';
    }
    //除此之外，还可以在大编号中嵌套中编号，中编号中嵌套小编号;也可小嵌套中，中嵌套大。