今天做项目遇到一个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. 20155203 《信息安全技术》 实验2 Windows口令破解

    实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 系统环境 Windows 实验工具 LC5 SuperDic(密码字典生成器) 实验原理 口令破解方法 口 ...

  2. 20155210 潘滢昊 Java第一次实验---凯撒密码

    Java第一次实验---凯撒密码 实验内容 实现凯撒密码,并进行测试. 实验代码 import java.io.*; import java.util.Scanner; public class ks ...

  3. 20155215宣言 2006-2007-2 《Java程序设计》第1周学习总结

    20155215宣言 2006-2007-2 <Java程序设计>第1周学习总结 考核方式 翻转课堂考核12次(5*12=60):每次考试20-30道题目,考试成绩规格化成5分(比如总分2 ...

  4. # 第二周课堂实践以及MyOD

    第二周课堂实践以及MyOD 之前使用的虚拟机出现问题被我删掉了,开始学着使用Mac系统自带的终端.在课堂上出现了问题,询问王雄老师也没有解决,课下先使用了实验楼环境进行实验,后来又在Mac重新进行了尝 ...

  5. 20155322 2017-2018-1《信息安全系统设计》第十周 课下作业-IPC

    20155322 2017-2018-1<信息安全系统设计>课下作业-IPC 作业内容 研究Linux下IPC机制:原理,优缺点,每种机制至少给一个示例,提交研究博客的链接. 共享内存 管 ...

  6. JVM知识（上）

    目录 什么是JVM? JVM的生命周期 JVM的体系结构 JVM的数据类型 java虚拟机被称为"虚拟",因为它是一个抽象的计算机定义的规范.要运行一个Java程序,需要一个抽象的 ...

  7. SpringBoot (1) idea下的环境搭建及demo

    1.Spring Boot简介 wiki上的介绍: Spring Boot是Spring的常规配置解决方案,用于创建可以“运行”的独立的,生产级的基于Spring的应用程序.[22]它预先配置了Spr ...

  8. JavaScript 中函数的定义和调用

    3种函数定义方式: 1.使用关键字 function 来声明并定义函数 function myFunction(a, b) { return a * b; } 调用函数: var x = myFunc ...

  9. 【Jmeter测试】BeanShell介绍和使用

      BeanShell是什么? BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言: BeanShell是用Jav ...

  10. 数据库mysql的常规操作

    1. 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库. 简单来说是本身可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据进 ...