【移动端debug-1】css3中box-shadow的溢出问题
2015-08-06 01:07
429 查看
今天做项目遇到一个box-shadow的溢出父容器的问题,如下面的代码中,子容器inner的box-shadow在没有任何设置的情况下是溢出父容器的。
代码:
View Code
预览图:
此时解决的方法很简单,只需要在父容器的样式里加上over-flow:hidden就可以了
预览图:
但有时候现实中的项目会比较复杂,比如我在项目中,为了给子容器增加z-index,使用了position:absolute,此时子容器的box-shadow也出现了溢出父容器的现象。解决的办法其实也很简单,只需要给父容器outer指定position:relative,把它变为子容器inner的位移参照物即可。
预览图:
代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .outer { width: 200px; height: 200px; background: #ffffff; border: 1px solid #000000; border-radius: 10px; } .inner { width: 100px; height: 100px; margin: 50px auto; background: #eeeeee; box-shadow: 75px 75px black; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
View Code
预览图:
此时解决的方法很简单,只需要在父容器的样式里加上over-flow:hidden就可以了
.outer { width: 200px; height: 200px; background: #ffffff; border: 1px solid #000000; border-radius: 10px; overflow: hidden; }
预览图:
但有时候现实中的项目会比较复杂,比如我在项目中,为了给子容器增加z-index,使用了position:absolute,此时子容器的box-shadow也出现了溢出父容器的现象。解决的办法其实也很简单,只需要给父容器outer指定position:relative,把它变为子容器inner的位移参照物即可。
.outer { position: relative; width: 200px; height: 200px; background: #ffffff; border: 1px solid #000000; border-radius: 10px; overflow: hidden; } .inner { position: absolute; width: 100px; height: 100px; margin: 50px auto; background: #eeeeee; box-shadow: 75px 75px black; }
预览图:
相关文章推荐
- Swift 与 Object-C 项目混搭桥接文件的配置小记
- iOS-真机调试
- Android性能优化典范
- iOS-设置启动图片
- Android多种方式实现自定义Dialog对话框
- iOS中—触摸事件详解及使用
- Android Studio如何导入SlidingMenu超详细版
- iPhone开发入门系列1(iOS8+Swift版)天天打靶APP学习10-11
- Swift入门(八)——功能强大的求余运算符
- Supervised Descent Method and its Applications to Face Alignment
- Android 读取sd卡图片并显示
- Android笔记 (二) Android的核心---Activity
- 浙江APP开发第一品牌
- android JNI基础
- Android之应用首次使用的欢迎界面实例
- Objective-C NSPredicate
- iOS 9应用开发教程之创建iOS 9项目与模拟器介绍
- Cocos2d-x-v3中3D网格特效动画的应用
- Android 自定义ImageView实现src属性的选择器效果
- Android复习笔记(12)- listView的使用