用box-shadow来实现按钮按下去的效果

hxy 2020-03-22 PM 177℃ 0条 访问: 178 次

eg:

input{
  box-shadow: 0.5rem 0.5rem 2rem #babecc, -0.5rem -0.5rem 1rem #fff;
}

这里input有了阴影效果,看起来像立体。
https://img.hxyxyz.top:444/images/2020/03/22/11.png

input:hover{
box-shadwo:0 0 0 0 #babecc;
 }

这里input没有阴影,看起来像被按下去了。

https://img.hxyxyz.top:444/images/2020/03/22/120fca212f12143e3c.png

标签: none

非特殊说明,本博所有文章均为博主原创。

评论啦~