div的宽和高和阴影偏移的位置有关系的哦~~~~
来源：2-3 CSS3边框 阴影 box-shadow（二）
Carrie_IT
2014-12-18 15:15
div的宽和高和阴影偏移的位置有关系的哦~~~~可以看下我发的截图和以下代码测试下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.box{ width:104px; height:104px; overflow:hidden;}
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666;
background:red;
}
</style>
</head>
<body>
<h2>外阴影</h2>
<div class="box">
<div class="boxshadow-outset">
</div>
</div>
</body>
</html>
写回答
关注
3回答
-
- zhangcl
- 2016-01-29 16:07:49
兄弟，我告诉你是什么原因。
你用的是div里面再套一个div，但是你没有用绝对定位，所以内层的div和外层的div边距不是重合在一起的（left和top的边线不是重合的）。你可能认为外层div宽度是104，内层div宽度是100+4（阴影）,所以两个div的宽度应该一样是吗？告诉你，这样是错的，因为元素之间本身是有间隙存在的（默认情况下），你可以认为元素之间自带margin。
如果你要解决这个问题，那么你要设置内层div的样式属性position:absolute;left:0px;top:0px;
同时还要设置外层div的样式属性position:relative或者absolute都可以,这个外层div必须设置position是因为，如果不设置，那么内层的div就找不到参照，就会向上寻找有position属性的父级元素作为参照，如果找不到，那么就是以body元素为参照。
还有更简单的方法，用float:left吧
-
- 霞_霞
- 2015-01-12 17:19:42
div的宽和高实际阴影偏移的位置没有关系的，只不过你的代码中box层加了overflow:hidden;所以把boxshadow-outset层的阴影隐藏了
-
- 卉卉昵称不能重复
- 2014-12-31 15:26:10
有关系的吗？我感觉好像没有诶 因为如果在"boxshadow-outset"这个div后面再加一个方块 会挨着红色的底部放置 把阴影遮住。。。实际像素就是width和height吧
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242553 学习 · 2623 问题
相似问题