使用 CSS 的软边缘？答案

【问题标题】：Soft Edges using CSS?使用 CSS 的软边缘？
【发布时间】：2016-07-22 12:04:29
【问题描述】：

我正在使用 RGBA 创建覆盖在图像顶部的透明背景。工作得很好。我的问题是：有没有办法将盒子的边缘“软化”到它更多地流入图片而不是硬边缘的地方。

这是我的盒子 CSS：

#past{
    position:absolute;
    left:0;
    top:363px;
    background-color: rgba(34,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

【解决方案1】：

另一种选择是使用我个人最喜欢的 CSS 工具之一：box-shadow。

盒子阴影实际上是节点上的投影。它看起来像这样：

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,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,34,34,0.6);

这应该会给你一个“模糊”的顶部边缘。

本网站将提供更多信息：http://css-tricks.com/snippets/css/css-box-shadow/

【讨论】：

这是对box-shadow 的一个很好的解释，我将继续返回！非常适合我的学习方式。
请不要链接到 w3schools，而是链接到 mdn developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

【解决方案2】：

这取决于您要寻找的褪色类型。

但是使用阴影和圆角，您可以获得不错的效果。圆角，因为阴影越大，边缘看起来越奇怪，除非你用圆角平衡它。

http://jsfiddle.net/tLu7u/

还有..http://css3pie.com/

【讨论】：

【解决方案3】：

您可以使用 CSS 渐变 - 尽管浏览器之间并不一致，因此您必须为每个浏览器编写代码

像这样：CSS3 Transparency + Gradient

渐变在顶部或右上角应该更透明（取决于功能）

【讨论】：

看起来很有趣......将不得不把它弄乱一些，看看我得到了什么。