Question

是否可以让两个div与盒子阴影重叠，完全透明的边缘？在我的例子中，我希望保持褪色，圆润的边缘，但重要的是通过淡入淡出可以看到底层的盒子。但是你可以看到褪色的边缘并不是完全透明的，所以它会显示一个白色的边框，而不是让蓝色的光芒透过..

是否可以在不诉诸png或类似的情况下完成这项工作？

.bg {
    background-image: -moz-linear-gradient(right top , rgba(255, 255, 255, 0) 0%, #FF0000 100%);
    box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    -webkit-box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    -moz-box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    opacity: 0.7;
    position: absolute;
}

Answer 1

我不知道插入框阴影是否可行;但是，您可以使它们与重叠元素的开始框阴影无缝重叠。

您所要做的就是为重叠元素提供与其背景颜色相同的盒阴影颜色。

我在这里编辑过您的示例:(我没有复制所有特定于供应商的前缀，只使用了box-shadow）。

http://jsbin.com/orajot/4/edit

可以有一个完全透明的插入框阴影？

1 个答案: