【移动端debug-1】css3中box-shadow的溢出问题
今天做项目遇到一个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的溢出问题的更多相关文章
- 02-移动端开发教程-CSS3新特性（中）
1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸.背景裁切区域.背景定位参照点.多重背景等. 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- 来看看css3中的box-shadow
不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...
- 前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- CSS3中的弹性盒子模型
介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...
- css3中的@font-face你真的了解吗
css3中的自定义字体方法@font-face @font-face属性可以让我们自定义网站字体属性,然后引用到想要应用该字体的元素上. 基本语法: @font-face { font-family: ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
随机推荐
- 20155220吴思其 实验2 Windows口令破解
实验目的: 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验人数 每组一人 系统环境 windows 实验工具 LC5 SuperDic 实验原理 口令破解方法 ...
- 20155233 2016-2017-2 《Java程序设计》第10周学习总结
20155233 2016-2017-2 <Java程序设计>第10周学习总结 学习目标 了解计算机网络基础 掌握Java Socket编程 理解混合密码系统 掌握Java 密码技术相关A ...
- WPF GDI+字符串绘制成图片（一）
原文:WPF GDI+字符串绘制成图片(一) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83 ...
- [cogs347]地震
COGS:地震(平衡树) COGS上一道题...文件名是equake 还是又打了一遍板子... 加个lazy标记就行了... 注意查询时先下传标记(lazy) // It is made by XZZ ...
- C# webapi 路由规则和接收数据
1:新建的web api项目 默认的访问api方式: (get,post,delect,put) api+控制器 以Post为例子 post提交单个参数: 接收方法 post提交多个参数 接 ...
- 关于js回调方法 js递归时使用方法
js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...
- Python3实现机器学习经典算法（一）KNN
一.KNN概述 K-(最)近邻算法KNN(k-Nearest Neighbor)是数据挖掘分类技术中最简单的方法之一.它具有精度高.对异常值不敏感的优点,适合用来处理离散的数值型数据,但是它具有 非常 ...
- 算法笔记（c++）--使用一个辅助栈排列另一个栈
算法笔记(c++)--使用一个辅助栈排列另一个栈 仅仅使用一个辅助栈,不使用其他数据结构来排列一个栈,要求,上大下小. 分析下.肯定是先吧主栈中的数据都放到辅助栈中,在辅助栈中上小下大. 1.首先循环 ...
- ThinkPHP - 6 - 学习笔记（2015.5.4）
解决:OneThink 站点无法被友言uyan后台识别 打开友言uyan插件功能,但OneThink站点无法被友言uyan后台检测到.页面生成的uyan代码为: <!-- UY BEGIN -- ...
- Python3 迭代器和生成器
想要搞明白什么是迭代器,首先要了解几个名词:容器(container).迭代(iteration).可迭代对象(iterable).迭代器(iterator).生成器(generator). 看图是不 ...