2

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

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

2 回答 2

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中工作。

我能看到的唯一另一种方法是匹配andborder-radius以便它匹配阴影。在这种情况下会是，但我根本无法匹配，当然它会随着不同的颜色或图像而变化。background-colourdivborder-radius100pxbackground-color

于 2013-01-14T11:42:35.590 回答
-1

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

于 2013-01-14T10:45:59.520 回答