今天做项目遇到一个box-shadow的溢出父容器的问题，如下面的代码中，子容器inner的box-shadow在没有任何设置的情况下是溢出父容器的。

代码：

<!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>

预览图：

此时解决的方法很简单，只需要在父容器的样式里加上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;

    }

预览图：

【移动端debug-1】css3中box-shadow的溢出问题的更多相关文章

  1. 02-移动端开发教程-CSS3新特性（中）

    1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸.背景裁切区域.背景定位参照点.多重背景等. 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比 ...

  2. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  3. 来看看css3中的box-shadow

    不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...

  4. 前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  5. css3中的变形（transform）、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  6. CSS3中的弹性盒子模型

    介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

  7. css3中的@font-face你真的了解吗

    css3中的自定义字体方法@font-face @font-face属性可以让我们自定义网站字体属性,然后引用到想要应用该字体的元素上. 基本语法: @font-face { font-family: ...

  8. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  9. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

随机推荐

  1. 20155206 2016-2017-2 《Java程序设计》第1周学习总结

    20155206 2016-2017-2 <Java程序设计>第1周学习总结 第一,二章学习内容总结 第一章 java基本知识 Java的三种技术架构: JAVAEE:Java Platf ...

  2. 20155322 2016-2017-2 《Java程序设计》第三周学习总结

    20155322 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 本周学习的内容主要为教材的第四第五章,下面是总结: 第四章 主要讨论了五个问题:类与对象.基 ...

  3. Qt开发者关于QThread的咆哮——你们都用错了

    Qt开发者关于QThread的咆哮——你们都用错了 我们(Qt用户)正广泛地使用IRC来进行交流.我在Freenode网站挂出了#qt标签,用于帮助大家解答问题.我经常看到的一个问题(这让我不厌其烦) ...

  4. day2 RHCE

    1.配置SELINUX 在system1和system2上要求SeLinux的状态为enforcing.要求系统重启后依然生效. server [root@server0 ~]# getenforce ...

  5. mfs分布式系统从理论简介到实战部署

    文章前面想说的话:这篇博客写出来真是有点累到了,本来昨天就基本就写好了,放在草稿里面,今天打开就没有了!!唉,就尼玛离我而去了,只有重写,然后中间虚拟机还“爆炸”重启又搞了一会,不容易呀!!希望各位博 ...

  6. [原创软件]PC端与移动端文件信息互通工具

    一个不小心,花了几个小时,就做出来了一个专利,这不科学啊... 软件主要功能: 跨平台(已适配Mac.Windows)远程连接手机端和PC端 远程执行shell命令 远程和本地文件实现互通传输共享 显 ...

  7. InTelliJ 字体调整

    Java IDE 工具InTelliJ 调整字体大小 1.File -> Settings 2.左上的搜索框中输入 font. 等待自动查找结果. 3.修改size 大小

  8. 用Tensorflow完成简单的线性回归模型

    思路:在数据上选择一条直线y=Wx+b,在这条直线上附件随机生成一些数据点如下图,让TensorFlow建立回归模型,去学习什么样的W和b能更好去拟合这些数据点. 1)随机生成1000个数据点,围绕在 ...

  9. spring-boot-mybatis搭建

    写在开始 mybatis是一个持久化框架,支持手动sql.存储过程.高级映射.mybatis支持XML方式或注解方式将POJO与数据库表间建立映射. maven依赖 spring-boot.mysql ...

  10. log4j 配置使用

    使用log4j来管理日志信息,非常方便,下面简单介绍一下整个使用流程: 1.创建简单java项目 2.在类路径下新建log4j.properties文件 3.配置log4j.properties文件 ...