Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果

本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想

（1、normal）（2、hover）（3、active）

  /*建立一个带圆角矩形*/
         .pesudo{  
          position: relative;
          margin-top:80px;
          width: 120px;
          height:120px;
          border-radius:1em;
          background:#00aabb;
          cursor:pointer;
        }
         /*用before设置好一个hover的状态*/
        .pesudo:before{
          position: absolute;
          display:block;
          top: 0; right: 0; bottom: 0; left: 0;
          z-index:1;
          border-radius:1em;
          background:rgba(0,0,0,.1);
        }
        /*当元素hover的时候就出现设置好的before*/
        .pesudo:hover:before{
          content:"";
        }
        /*用after设置好一个active的状态*/
        .pesudo:after{
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          z-index:1;
          border-radius:1em;
          background:rgba(255,255,255,.2);
        }
        /*当元素active得而时候就出现设置好的after*/
        .pesudo:active:after{
          content:"";
        }

ok，然后就轻松实现了