CSS3 Drop Shadow被推入元素下方的两侧

Question

我正在尝试创建投影效果，就像附加图像中的内容一样。

带有下面代码的阴影直接出现在元素下方，但我需要它从左边开始大约20px，从右边开始大约5px。

任何人都有关于如何在两侧创建此阴影偏移的任何提示吗？

.myDiv {
  width: 100px;
  height: 100px;
  box-shadow: 10px 0px 5px -2px #999;
}

Answer 1

在@Ghost Echo的回答的基础上，可以使用::after伪元素来响应。

给出伪元素块显示会导致元素的相对父元素宽度为100%，因此只需添加height:100%即可使元素完全匹配父元素。然后只是添加边距以将::after缩小到所需宽度的情况。相对定位和z-index用于将元素移动到主<div>后面，示例box-shadow值与所讨论的图像紧密匹配。您可能需要更改这些内容以满足您的具体要求，并根据需要添加跨浏览器box-shadow。

See demo或以下代码。

<强> CSS

.myDiv {
    width: 100px;
    height: 100px;
    background-color:#fff;
    border:1px solid #eee; /* added for demo */
    position:relative;
}
.myDiv::after {
    content:"";
    display:block;
    margin:0 5px 0 20px;
    position:relative;
    z-index:-1;
    height:100%;
    box-shadow: 0 5px 5px 0 rgba(153, 153, 153, 1);
}

<强> HTML

<div class="myDiv"></div>

如果您需要support IE8将::after更改为:after，因为它只支持旧的CSS2语法。 IE7及以下版本不支持。

Answer 2

这应该这样做或关闭！

.myDiv {
  width: 100px;
  height: 100px;
  box-shadow: 20px 40px 2px -33px #999;
}

注意：最后一个数字是减少大小的负余量，而40将其推向可见

Answer 3

这是一个使用CSS :after psuedo类的有趣解决方案。

http://jsfiddle.net/CY2N5/2/

这样您就可以将框阴影放在具有较小尺寸的父div下面的<div>上。你必须根据自己的喜好调整盒子阴影。只是另一种解决方案;-D

.myDiv {
width: 100px;
height: 100px; 
background:red;
position:relative; 
}
.myDiv:after {
content:"";
display:block;
width: 75px;
height: 100px;
margin-left:20px;
position:absolute;
z-index:-1;
-webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 10px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 10px 5px 0px rgba(50, 50, 50, 0.75);
} 

可以在此处看到 repsonsive解决方案：http://jsfiddle.net/CY2N5/4/