为了账号安全,请及时绑定邮箱和手机立即绑定

div的宽和高和阴影偏移的位置有关系的哦~~~~

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 回答

兄弟,我告诉你是什么原因。

你用的是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吧

0 回复 有任何疑惑可以回复我~

div的宽和高实际阴影偏移的位置没有关系的,只不过你的代码中box层加了overflow:hidden;所以把boxshadow-outset层的阴影隐藏了

0 回复 有任何疑惑可以回复我~

有关系的吗?我感觉好像没有诶 因为如果在"boxshadow-outset"这个div后面再加一个方块 会挨着红色的底部放置 把阴影遮住。。。实际像素就是width和height吧

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

div的宽和高和阴影偏移的位置有关系的哦~~~~

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信