Question

尝试使用CSS3 box-shadow属性，我想知道你是否可以阻止对象投射它来剪切阴影。在下面的代码中，DIV投射阴影是不可见的，但阴影仍被剪裁。有没有办法在CSS中完成这项工作？也许在JavaScript / JQuery中？或者是将盒阴影偏移设置为大于DIV的唯一方法，并重新定位阴影（不是很优雅）。

div#shadow
{
    position: absolute;
    background-color: transparent;
    top: 100px;     
    left: 100px;
    width: 300px;
    height: 200px;
    box-shadow: 100px 100px 100px gray;
}

Answer 1

我不喜欢页面上的位置元素，但这可能是一种很好的方式吗？

div#shadow {
    position: absolute;
    background-color: transparent;
    top: 100px;     
    left: -9999px;
    width: 300px;
    height: 200px;
    box-shadow: 10199px 100px 100px gray;
}

为left属性赋予较大的负值，然后为box-shadow的左侧属性提供使用此公式计算的数字：

0 - actual negative left + desired left + original box-shadow's left

因此，对于上面的示例，它将是：

0 - -9999 + 100 + 100 = 10199

您可以在此jsfiddle中看到它正常工作。

我能看到的另一种方式是匹配border-radius的{{1}}和background-colour，以便与阴影相匹配。在这种情况下，div将是border-radius，但我根本无法匹配100px，当然它会随着不同的颜色或图像而改变。

Answer 2

如果您使用opacity而不是透明背景颜色，它应该可以使用。

如何创建一个完整的CSS框阴影，而不是剪裁

2 个答案: