黑马程序员技术交流社区

标题: 多重阴影效果怎么做？ [打印本页]

作者: 庭院深深深几许 时间: 2019-2-25 14:11
标题: 多重阴影效果怎么做？
　　很多时候我们做阴影效果不是简单的四周阴影，很多时候我们需要使用内部阴影效果，比如说一个按钮，我们需要右下左三边的内部阴影，但是不需要上边的内部阴影，怎么办？
　　如果我们直接写：
　　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效果就能做出很好看的按钮，最终效果如下图：

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2