box-shadow最好看
时间: 2023-09-27 17:11:04 浏览: 108
CSS3属性box-shadow使用详细教程
box-shadow的美观程度主要取决于你的设计需求和个人喜好。有很多不同的box-shadow效果可以选择,你可以根据你的设计主题和风格来选择适合的效果。下面是一些常见的box-shadow效果示例,你可以参考它们来找到最适合你的样式:
1. 白色卡片悬浮式阴影:box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); [3]
2. 深色卡片凹陷式阴影:box-shadow: 0 2px 10px rgba(0,0,0,.2); [2]
3. 浅色卡片浮起式阴影:box-shadow: 0 2px 5px rgba(0,0,0,.1); [2]
4. 立体按钮效果:box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2); [2]
5. 扁平化阴影效果:box-shadow: 0 1px 3px rgba(0,0,0,.1); [2]
这只是一些常见的示例,请根据你的具体设计需求和个人喜好进行调整和定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS阴影效果的比较之drop-Shadow与box-Shadow](https://download.csdn.net/download/weixin_38660624/13682015)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [比较美观的box-shadow值 推荐](https://blog.csdn.net/m0_56193211/article/details/122087383)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文