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:; right:; bottom:; left:;
           z-index:;
           border-radius:1em;
           background:rgba(0,0,0,.1);
         }
         /*当元素hover的时候就出现设置好的before*/
         .pesudo:hover:before{
           content:"";
         }
         /*用after设置好一个active的状态*/
         .pesudo:after{
           position: absolute;
           top:; right:; bottom:; left:;
           z-index:;
           border-radius:1em;
           background:rgba(255,255,255,.2);
         }
         /*当元素active得而时候就出现设置好的after*/
         .pesudo:active:after{
           content:"";
         }

ok，然后就轻松实现了