【移动端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的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
随机推荐
- 实验一 Java开发环境的熟悉(Linux+Eclipse)
实验一 Java开发环境的熟悉(Linux+Eclipse) 实验内容及步骤 使用JDK编译.运行简单的Java程序 打开windows下的cmd → 输入cd Code命令进入Code目录 → 输入 ...
- 20155233 2016-2017-2 《Java程序设计》第1周学习总结
20155233 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 本周主要学习教材的第一章.第二章,了解了Java的发展历程,最基本的Java环境的搭建,以及 ...
- 2016-2017-2 《Java程序设计》第二周学习总结
20155319 2016-2017-2 <Java程序设计>第二周学习总结 课堂学习内容 git:版本控制 java -d bin(当地文件夹) src/Hello.java把生成的.c ...
- ubuntu下刻录优盘的命令
fdisk -l 找到优盘为/dev/sdb4 sudo dd if=/home/alex/Desktop/kali-linux-2016.1-amd64.iso of=/dev/sdb4
- 【LOJ10121】与众不同
[LOJ10121]与众不同 题面 LOJ 题解 这题是_\(tham\)给\(ztl\)他们做的,然而这道题™居然还想了蛮久... 首先可以尺取出一个位置\(i\)上一个合法的最远位置\(pre_i ...
- SaltStack入门篇(六)之部署Redis主从实现和Job管理
一.部署Redis主从 需求: 192.168.56.11是主,192.168.56.12是从 redis监听自己的ip地址,而不是0.0.0.0 分析: linux-node1 安装 配置 启动 l ...
- 【JUC源码解析】FutureTask
简介 FutureTask, 一个支持取消行为的异步任务执行器. 概述 FutureTask实现了Future,提供了start, cancel, query等功能,并且实现了Runnable接口,可 ...
- Phaser3让超级玛丽实现轻跳、高跳及加上对应的跳跃声音
mario jumper 在线测试地址:http://www.ifiero.com/uploads/phaserjs3/jumper/ 空格键:轻按:跳低 ,长按:跳高键盘:--> 向右 , ...
- 【转】AOE机制的DSL及其实际运用
AOE这个词的意思,我相信玩过WOW的人都不陌生,包括玩过LoL的也不会陌生,说穿了就是一个区域内发生效果(Area of effect).这里我们要讨论的就是关于一个适合于几乎所有游戏的AOE机制, ...
- java-length 、length()、size()的区别
public static void main(String[] args) { //length .length().size()的区别 //length属性 针对数组长度 String a[]={ ...