今天做项目遇到一个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. 实验一 Java开发环境的熟悉（Linux+Eclipse）

    实验一 Java开发环境的熟悉(Linux+Eclipse) 实验内容及步骤 使用JDK编译.运行简单的Java程序 打开windows下的cmd → 输入cd Code命令进入Code目录 → 输入 ...

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

    20155233 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 本周主要学习教材的第一章.第二章,了解了Java的发展历程,最基本的Java环境的搭建,以及 ...

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

    20155319 2016-2017-2 <Java程序设计>第二周学习总结 课堂学习内容 git:版本控制 java -d bin(当地文件夹) src/Hello.java把生成的.c ...

  4. ubuntu下刻录优盘的命令

    fdisk -l  找到优盘为/dev/sdb4 sudo dd if=/home/alex/Desktop/kali-linux-2016.1-amd64.iso of=/dev/sdb4

  5. 【LOJ10121】与众不同

    [LOJ10121]与众不同 题面 LOJ 题解 这题是_\(tham\)给\(ztl\)他们做的,然而这道题™居然还想了蛮久... 首先可以尺取出一个位置\(i\)上一个合法的最远位置\(pre_i ...

  6. SaltStack入门篇（六）之部署Redis主从实现和Job管理

    一.部署Redis主从 需求: 192.168.56.11是主,192.168.56.12是从 redis监听自己的ip地址,而不是0.0.0.0 分析: linux-node1 安装 配置 启动 l ...

  7. 【JUC源码解析】FutureTask

    简介 FutureTask, 一个支持取消行为的异步任务执行器. 概述 FutureTask实现了Future,提供了start, cancel, query等功能,并且实现了Runnable接口,可 ...

  8. Phaser3让超级玛丽实现轻跳、高跳及加上对应的跳跃声音

      mario jumper 在线测试地址:http://www.ifiero.com/uploads/phaserjs3/jumper/ 空格键:轻按:跳低 ,长按:跳高键盘:--> 向右 , ...

  9. 【转】AOE机制的DSL及其实际运用

    AOE这个词的意思,我相信玩过WOW的人都不陌生,包括玩过LoL的也不会陌生,说穿了就是一个区域内发生效果(Area of effect).这里我们要讨论的就是关于一个适合于几乎所有游戏的AOE机制, ...

  10. java-length 、length()、size()的区别

    public static void main(String[] args) { //length .length().size()的区别 //length属性 针对数组长度 String a[]={ ...