一些概念
● 在一个100%平面设计的时代之后，我们现在又回到了在UI设计中使用阴影(“平面设计2.0”)
![图片[1] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/a03e3fcefbb74c03b4097c73f7c176b1.png)
● 阴影箱深度(3D):阴影越多，离元素界面越远
![图片[2] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/784024d82ee0409baad5089d9b89b852.png)
利用好阴影
你不必使用阴影!只在对网站个性有意义的情况下使用它们
![图片[3] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/bb109d229b084979b4c8ccbbd70386e5.png)
![图片[3] - 58.网页设计规则#5_阴影 - MaxSSL](data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E)
使用少量的阴影:不要给每个元素都添加阴影!
照亮你的阴影，不要让你的阴影太暗！
在正确的情况下使用阴影对应该突出的小元素使用小阴影(以吸引注意力)
![图片[4] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/29c9f33b92f94dcf817df45b5753dd8d.png)
对于更大的区域使用中等大小的阴影，应该更突出一点；
![图片[5] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/b69f15c08896419ba590ed9194ced0e1.png)
对于应该浮在界面上方的元素使用大阴影
![图片[6] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/fa9fef56045345d4ac85d72a506dfa84.png)
尝试在鼠标交互时改变阴影(点击和悬停)
![图片[7] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/2bc4304e4d514f7280456bd52b9b7591.png)
附赠:尝试发光(彩色阴影)
![图片[8] - 58.网页设计规则#5_阴影 - MaxSSL](https://www.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/34f1972a8c404231b31de2804f312dbe.png)
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
