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:"";
}