内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

box-shadow多重阴影效果怎么做?三边阴影效果怎么做?

发布:2017-09-04 浏览: 评论(
很多时候我们做阴影效果不是简单的四周阴影,很多时候我们需要使用内部阴影效果,比如说一个按钮,我们需要右下左三边的内部阴影,但是不需要上边的内部阴影,怎么办?
如果我们直接写:
box-shadow:-5px -5px 5px #888888 inset;

你会发现这里只是右下的阴影,但是还有左边的阴影怎么办?
在实践中我们发现还有一种写法很少见的,就是多重阴影怎么写:

box-shadow: -5px -5px 5px #888888 inset,5px 5px 5px #888888 inset;

用逗号分隔多重阴影,上面的效果已经是四边都有内部阴影了,那再去掉一边就可以了:

box-shadow: -5px -5px 5px #888888 inset,5px 0 5px #888888 inset;

这样我们就实现了右下左三边的内部阴影效果,再加上从上往下的linear-gradient渐变效果以及border-radius效果就能做出很好看的按钮,最终效果如下图:




前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4