使用 CSS 的软边缘？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6964794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Soft Edges using CSS?
提问by L84
I am using RGBA to create a transparent background that overlays on top of an image. Works just fine. My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge.
我正在使用 RGBA 创建覆盖在图像顶部的透明背景。工作得很好。我的问题是：有没有办法“软化”盒子的边缘，使其更多地流入图片而不是硬边。
Here is my CSS for the box:
这是我的盒子 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;
}
I know I can do this by creating a background image in Photoshop but I was looking for a CSS only way vs using an image.
我知道我可以通过在 Photoshop 中创建背景图像来做到这一点，但我一直在寻找一种仅使用 CSS 的方式而不是使用图像。
Also I would prefer if at all possible for this to work in all browsers.
此外，如果可能的话，我希望它可以在所有浏览器中工作。
Thanks for the help. =>
谢谢您的帮助。=>
回答by OverZealous
Another option is to use one of my personal favorite CSS tools: box-shadow.
另一种选择是使用我个人最喜欢的 CSS 工具之一：box-shadow.
A box shadow is really a drop-shadow on the node. It looks like this:
框阴影实际上是节点上的阴影。它看起来像这样：
-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);
The arguments are:
论据是：
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.
So, you could leave your current design, and add a box-shadow like:
因此，您可以保留当前的设计，并添加一个框阴影，例如：
box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
This should give you a 'blurry' top-edge.
这应该会给你一个“模糊”的顶部边缘。
This website will help with more information: http://css-tricks.com/snippets/css/css-box-shadow/
该网站将提供更多信息：http: //css-tricks.com/snippets/css/css-box-shadow/
回答by Joonas
It depends on what type of fading you are looking for.
这取决于您正在寻找哪种类型的褪色。
But with shadow and rounded corners you can get a nice result. Rounded corners because the bigger the shadow, the weirder it will look in the edges unless you balance it out with rounded corners.
但是使用阴影和圆角，您可以获得不错的效果。圆角，因为阴影越大，边缘看起来就越奇怪，除非你用圆角来平衡它。
also.. http://css3pie.com/
还有.. http://css3pie.com/
回答by Jacek Kaniuk
You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one
您可以使用 CSS 渐变 - 尽管浏览器之间不一致，因此您必须为每个浏览器编写代码
Like that: CSS3 Transparency + Gradient
像这样：CSS3 透明度 + 渐变
Gradient should be more transparent on top or on top right corner (depending on capabilities)
渐变应该在顶部或右上角更透明（取决于功能）
