我正在使用RGBA创建一个覆盖在图像顶部的透明背景。工作得很好。我的问题是：有没有办法将盒子的边缘“软化”到更多地流入图片而不是硬边缘的位置。
这是我的框的CSS：
#past{
position:absolute;
left:0;
top:363px;
background-color: rgba(34,34,0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222,endColorstr=#99222222);
/* For IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222,endColorstr=#99222222);
z-index:10;
padding:10px;
}
我知道我可以通过在Photoshop中创建背景图像来实现这一目标但我正在寻找一种仅使用CSS的方式与使用图像。
此外，我希望尽可能在所有浏览器中都可以使用它。
谢谢您的帮助。 =>
解决方法
另一种选择是使用我最喜欢的CSS工具之一：
box-shadow。
框阴影实际上是节点上的阴影。它看起来像这样：
-moz-Box-shadow: 1px 2px 3px rgba(0,.5); -webkit-Box-shadow: 1px 2px 3px rgba(0,.5); Box-shadow: 1px 2px 3px rgba(0,.5);
论点是：
1px: Horizontal offset of the effect. Positive numbers shift it right,negative left. 2px: Vertical offset of the effect. Positive numbers shift it down,negative up. 3px: The blur effect. 0 means no blur. color: The color of the shadow.
因此，您可以保留当前的设计，并添加如下框阴影：
Box-shadow: 0px -2px 2px rgba(34,0.6);
这应该会给你一个“模糊”的前沿。
本网站将提供更多信息：http://css-tricks.com/snippets/css/css-box-shadow/
